Merge branch 'next'

.github/workflows/build_and_test.yml

@@ -1,14 +1,6 @@
 name: Build & Test
 
-on:
-  push:
-    branches:
-    - master
-    - next
-  pull_request:
-    branches:
-    - master
-    - next
+on: push
 env:
   CI: true
   node: 12.x

.prettierignore

@@ -1,3 +1,5 @@
 generated-types.ts
 lazy-extensions.module.ts
 shared-extensions.module.ts
+generated-graphql-shop-errors.ts
+generated-graphql-admin-errors.ts

docs/README.md

@@ -49,6 +49,11 @@ This is required as its presence determines whether the declaration is extracted
 This optional tag can be used to group declarations together onto a single page. This is useful e.g. in the case of utility functions or
 type aliases, which may be considered too trivial to get an entire page to themselves.
 
+##### `@docsWeight`
+
+This optional tag can be used to define the order of definitions on a single page. By default, multiple definitions on a page are sorted alphabetically,
+but this sometimes leaves the "main" definition near the bottom. In this case, the `@docsWeight` tag can promote it to the top (0 is first).
+
 ##### `@description`
 
 This tag specifies the text description of the declaration. It supports markdown, but should not be used for code blocks, which should be tagged with `@example` (see below). Links to other declarations can be made with the `{@link SomeOtherDeclaration}` syntax. Also applies to class/interface members.

docs/content/docs/developer-guide/error-handling.md

@@ -0,0 +1,128 @@
+---
+title: "Error Handling"
+showtoc: true
+---
+
+# Error Handling
+
+Errors in Vendure can be divided into two categories:
+
+* Unexpected errors
+* Expected errors
+
+These two types have different meanings and are handled differently to one another.
+
+## Unexpected Errors
+
+This type of error occurs when something goes unexpectedly wrong during the processing of a request. Examples include internal server errors, database connectivity issues, lacking permissions for a resource, etc. In short, these are errors that are *not supposed to happen*.
+
+Internally, these situations are handled by throwing an Error:
+
+```TypeScript
+const customer = await this.findOneByUserId(ctx, user.id);
+// in this case, the customer *should always* be found, and if
+// not then something unknown has gone wrong...
+if (!customer) {
+    throw new InternalServerError('error.cannot-locate-customer-for-user');
+}
+```
+
+In the GraphQL APIs, these errors are returned in the standard `errors` array:
+
+```JSON
+{
+  "errors": [
+    {
+      "message": "You are not currently authorized to perform this action",
+      "locations": [
+        {
+          "line": 2,
+          "column": 2
+        }
+      ],
+      "path": [
+        "me"
+      ],
+      "extensions": {
+        "code": "FORBIDDEN"
+      }
+    }
+  ],
+  "data": {
+    "me": null
+  }
+}
+```
+So your client applications need a generic way of detecting and handling this kind of error. For example, many http client libraries support "response interceptors" which can be used to intercept all API responses and check the `errors` array. 
+
+## Expected errors (ErrorResults)
+
+This type of error represents a well-defined result of (typically) a GraphQL mutation which is not considered "successful". For example, when using the `applyCouponCode` mutation, the code may be invalid, or it may have expired. These are examples of "expected" errors and are named in Vendure "ErrorResults". These ErrorResults are encoded into the GraphQL schema itself.
+
+ErrorResults all implement the `ErrorResult` interface:
+
+```GraphQL
+interface ErrorResult {
+  errorCode: ErrorCode!
+  message: String!
+}
+```
+
+Some ErrorResults add other relevant fields to the type:
+
+```GraphQL
+"Returned if there is an error in transitioning the Order state"
+type OrderStateTransitionError implements ErrorResult {
+  errorCode: ErrorCode!
+  message: String!
+  transitionError: String!
+  fromState: String!
+  toState: String!
+}
+```
+
+Operations which may return ErrorResults use a GraphQL `union` as their return type:
+
+```GraphQL
+type Mutation {
+  "Applies the given coupon code to the active Order"
+  applyCouponCode(couponCode: String!): ApplyCouponCodeResult!
+}
+
+union ApplyCouponCodeResult = Order 
+  | CouponCodeExpiredError 
+  | CouponCodeInvalidError 
+  | CouponCodeLimitError
+``` 
+
+### Querying an ErrorResult union
+
+When performing an operation of a query or mutation which returns a union, you will need to use the [GraphQL conditional fragment](https://graphql.org/learn/schema/#union-types) to select the desired fields:
+
+```GraphQL
+mutation ApplyCoupon($code: String!) {
+  applyCouponCode(couponCode: $code) {
+    ...on Order {
+      id
+      couponCodes
+      total
+    }
+    # querying the ErrorResult fields
+    # "catches" all possible errors
+    ...on ErrorResult {
+      errorCode
+      message
+    }
+    # you can also specify particular fields
+    # if your client app needs that specific data
+    # as part of handling the error.
+    ...on CouponCodeLimitError {
+      limit
+    }
+  }
+}
+```
+
+This ensures that your client code is aware of and handles all the usual error cases.
+
+You can see all the ErrorResult types returned by the Shop API mutations in the [Shop API Mutations docs]({{< relref "/docs/graphql-api/shop/mutations" >}}). 

docs/content/docs/developer-guide/payment-integrations/index.md

@@ -57,7 +57,16 @@ const myPaymentIntegration = new PaymentMethodHandler({
         amount: order.total,
         state: 'Authorized' as const,
         transactionId: result.id.toString(),
-        metadata: result.outcome,
+        metadata: {
+          cardInfo: result.cardInfo,
+          // Any metadata in the `public` field
+          // will be available in the Shop API,
+          // All other metadata is private and 
+          // only available in the Admin API.
+          public: {
+            referenceCode: result.publicId,
+          }
+        },
       };
     } catch (err) {
       return {

docs/content/docs/developer-guide/shipping.md

@@ -1,8 +1,8 @@
 ---
-title: "Shipping"
+title: "Shipping & Fulfillment"
 showtoc: true
 ---
-# Shipping
+# Shipping & Fulfillment
 
 Shipping in Vendure is handled by [ShippingMethods]({{< relref "shipping-method" >}}). Multiple ShippingMethods can be set up and then your storefront can query [`eligibleShippingMethods`]({{< relref "/docs/graphql-api/shop/queries" >}}#eligibleshippingmethods) to find out which ones can be applied to the active order.
 
@@ -124,3 +124,25 @@ export const config: VendureConfig = {
   }
 }
 ```
+
+## Fulfillments
+
+Fulfillments represent the actual shipping status of items in an order. Like Orders, Fulfillments are governed by a [finite state machine]({{< relref "fsm" >}}) and by default, a Fulfillment can be in one of the [following states]({{< relref "fulfillment-state" >}}):
+
+* `Pending` The Fulfillment has been created
+* `Shipped` The Fulfillment has been shipped
+* `Delivered` The Fulfillment has arrived with the customer
+* `Cancelled` The Fulfillment has been cancelled 
+
+These states cover the typical workflow for fulfilling orders. However, it is possible to customize the fulfillment workflow by defining a [CustomFulfillmentProcess]({{< relref "custom-fulfillment-process" >}}) and passing it to your VendureConfig:
+
+```TypeScript
+export const config: VendureConfig = {
+  // ...
+  shippingOptions: {
+    customFulfillmentProcess: [myCustomFulfillmentProcess],
+  },
+};
+```
+
+For a more detailed look at how custom processes are used, see the [Customizing The Order Process guide]({{< relref "customizing-the-order-process" >}}).

docs/content/docs/plugins/plugin-examples.md

@@ -173,17 +173,15 @@ Also see the docs for [WorkerService]({{< relref "worker-service" >}}).
 
 ```TypeScript
 // order-processing.controller.ts
-import { asyncObservable, ID, Order } from '@vendure/core';
+import { asyncObservable, ID, Order, TransactionalConnection } from '@vendure/core';
 import { Controller } from '@nestjs/common';
 import { MessagePattern } from '@nestjs/microservices';
-import { InjectConnection } from '@nestjs/typeorm';
-import { Connection } from 'typeorm';
 import { ProcessOrderMessage } from './process-order-message';
 
 @Controller()
 class OrderProcessingController {
 
-  constructor(@InjectConnection() private connection: Connection) {}
+  constructor(private connection: TransactionalConnection) {}
 
   @MessagePattern(ProcessOrderMessage.pattern)
   async processOrder({ orderId }: ProcessOrderMessage['data']) {
@@ -234,7 +232,7 @@ export class OrderAnalyticsPlugin implements OnVendureBootstrap {
    */
   onVendureBootstrap() {
     this.eventBus.ofType(OrderStateTransitionEvent).subscribe(event => {
-      if (event.toState === 'Fulfilled') {
+      if (event.toState === 'Delivered') {
         this.workerService.send(new ProcessOrderMessage({ orderId: event.order.id })).subscribe();
       }
     });
@@ -272,9 +270,7 @@ The resolver just defines how to handle the new `addVideoToProduct` mutation, de
 ```TypeScript
 // product-video.service.ts
 import { Injectable, OnModuleInit } from '@nestjs/common';
-import { InjectConnection } from '@nestjs/typeorm';
-import { Connection } from 'typeorm';
-import { JobQueue, JobQueueService, ID, Product } from '@vendure/core';
+import { JobQueue, JobQueueService, ID, Product, TransactionalConnection } from '@vendure/core';
 import { transcode } from 'third-party-video-sdk'; 
 
 let jobQueue: JobQueue<{ productId: ID; videoUrl: string; }>;
@@ -283,7 +279,7 @@ let jobQueue: JobQueue<{ productId: ID; videoUrl: string; }>;
 class ProductVideoService implements OnModuleInit { 
   
   constructor(private jobQueueService: JobQueueService, 
-              @InjectConnection() private connection: Connection) {}
+              private connection: TransactionalConnection) {}
 
   onModuleInit() {
     // This check ensures that only a single JobQueue is created, even if this

docs/diagrams/order-state-diagram.puml

@@ -16,7 +16,7 @@ state ShopAPI {
     }
 }
 
-state AdminAPI {
+state AdminAPI #f9c876 {
     state PaymentAuthorized {
         PaymentAuthorized: The payment has been authorized by the
         PaymentAuthorized: payment provider.
@@ -27,12 +27,20 @@ state AdminAPI {
         PaymentSettled: provider, i.e. the transaction is complete.
     }
 
-    state PartiallyFulfilled {
-        PartiallyFulfilled: One or more OrderItems have been dispatched to the Customer
+    state PartiallyShipped {
+        PartiallyShipped: Some, but not all, OrderItems have been shipped to the Customer
     }
 
-    state Fulfilled #9d9 {
-        Fulfilled: All OrderItems have been dispatched to the Customer
+    state Shipped {
+        Shipped: All OrderItems have been shipped to the Customer
+    }
+
+    state PartiallyDelivered {
+        PartiallyDelivered: Some, but not all, OrderItems have arrived with the Customer
+    }
+
+    state Delivered #9d9 {
+        Delivered: All OrderItems have arrived with the Customer
     }
 
 
@@ -41,24 +49,28 @@ state AdminAPI {
     }
     Cancelled --> [*]
 
-    Fulfilled --> [*]
+    Delivered --> [*]
 }
 
 
-AddingItems --> ArrangingPayment: transitionOrderToState
-ArrangingPayment --> AddingItems: transitionOrderToState
-ArrangingPayment --> PaymentAuthorized: addPaymentToOrder
-ArrangingPayment -----> PaymentSettled: addPaymentToOrder
-PaymentAuthorized --> PaymentSettled: settlePayment
-PaymentSettled --> Fulfilled: fulfillOrder
-PaymentSettled --> PartiallyFulfilled: fulfillOrder
-PartiallyFulfilled --> PartiallyFulfilled: fulfillOrder
-PartiallyFulfilled --> Fulfilled: fulfillOrder
+AddingItems -> ArrangingPayment: transitionOrderToState
+ArrangingPayment -> AddingItems: transitionOrderToState
+ArrangingPayment -> PaymentAuthorized: addPaymentToOrder
+ArrangingPayment --> PaymentSettled: addPaymentToOrder
+PaymentAuthorized -> PaymentSettled: settlePayment
+PaymentSettled -> Shipped: addFulfillmentToOrder, transitionFulfillmentToState
+PaymentSettled --> PartiallyShipped: addFulfillmentToOrder, transitionFulfillmentToState
+Shipped --> PartiallyDelivered: transitionFulfillmentToState
+Shipped -> Delivered: transitionFulfillmentToState
+PartiallyShipped --> Shipped: transitionFulfillmentToState
+PartiallyDelivered --> Delivered: transitionFulfillmentToState
 
 PaymentAuthorized --> Cancelled: cancelOrder
-PaymentSettled --> Cancelled: cancelOrder
-PartiallyFulfilled --> Cancelled: cancelOrder
-Fulfilled --> Cancelled: cancelOrder
+PaymentSettled --> Cancelled
+Shipped --> Cancelled
+PartiallyShipped --> Cancelled
+PartiallyDelivered --> Cancelled
+Delivered --> Cancelled
 
 
 

package.json

@@ -13,7 +13,7 @@
     "docs:watch": "concurrently --restart-tries 5 -n docgen,hugo,webpack -c green,blue,cyan \"yarn generate-graphql-docs && yarn generate-typescript-docs -w\" \"cd docs && hugo server\" \"cd docs && yarn webpack -w\"",
     "docs:build": "yarn generate-graphql-docs && yarn generate-typescript-docs && cd docs && yarn webpack --prod && node build.js && hugo",
     "docs:deploy": "cd docs && yarn && cd .. && yarn docs:build",
-    "codegen": "ts-node scripts/codegen/generate-graphql-types.ts",
+    "codegen": "tsc -p scripts/codegen/plugins && ts-node scripts/codegen/generate-graphql-types.ts",
     "generate-typescript-docs": "ts-node scripts/docs/generate-typescript-docs.ts",
     "generate-graphql-docs": "ts-node scripts/docs/generate-graphql-docs.ts --api=shop && ts-node scripts/docs/generate-graphql-docs.ts --api=admin",
     "version": "yarn check-imports && yarn build && yarn generate-changelog && git add CHANGELOG.md && git add */version.ts",
@@ -27,33 +27,33 @@
     "publish-local": "lerna version --no-git-tag-version && cd scripts && ./publish-to-verdaccio.sh"
   },
   "devDependencies": {
-    "@commitlint/cli": "^8.2.0",
-    "@commitlint/config-conventional": "^8.2.0",
-    "@graphql-codegen/add": "1.13.1",
-    "@graphql-codegen/cli": "1.13.1",
-    "@graphql-codegen/fragment-matcher": "1.13.1",
-    "@graphql-codegen/typescript": "1.13.1",
-    "@graphql-codegen/typescript-compatibility": "1.13.1",
-    "@graphql-codegen/typescript-operations": "1.13.1",
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-conventional": "^11.0.0",
+    "@graphql-codegen/add": "2.0.1",
+    "@graphql-codegen/cli": "1.17.8",
+    "@graphql-codegen/fragment-matcher": "1.17.8",
+    "@graphql-codegen/typescript": "1.17.9",
+    "@graphql-codegen/typescript-compatibility": "2.0.0",
+    "@graphql-codegen/typescript-operations": "1.17.8",
+    "@graphql-tools/schema": "^6.2.4",
     "@types/graphql": "^14.0.5",
-    "@types/jest": "^25.1.4",
+    "@types/jest": "^26.0.14",
     "@types/klaw-sync": "^6.0.0",
     "@types/node": "^12.12.0",
-    "concurrently": "^5.0.0",
-    "conventional-changelog-core": "^4.0.3",
+    "concurrently": "^5.3.0",
+    "conventional-changelog-core": "^4.2.0",
     "find": "^0.3.0",
-    "graphql": "^14.5.8",
-    "graphql-tools": "^4.0.0",
-    "husky": "^3.0.0",
-    "jest": "^25.2.1",
+    "graphql": "15.3.0",
+    "husky": "^4.3.0",
+    "jest": "^26.5.2",
     "klaw-sync": "^6.0.0",
-    "lerna": "^3.16.4",
-    "lint-staged": "^10.0.9",
-    "prettier": "^2.0.2",
-    "ts-jest": "^25.2.1",
-    "ts-node": "^8.4.1",
-    "tslint": "^5.11.0",
-    "typescript": "3.8.3"
+    "lerna": "^3.22.1",
+    "lint-staged": "^10.4.0",
+    "prettier": "^2.1.2",
+    "ts-jest": "^26.4.1",
+    "ts-node": "^9.0.0",
+    "tslint": "^6.1.3",
+    "typescript": "4.0.3"
   },
   "resolutions": {
     "npm-packlist": "1.1.12"

packages/admin-ui-plugin/package.json

@@ -17,15 +17,15 @@
     "access": "public"
   },
   "devDependencies": {
-    "@types/express": "^4.0.39",
-    "@types/fs-extra": "^8.0.1",
+    "@types/express": "^4.17.8",
+    "@types/fs-extra": "^9.0.1",
     "@vendure/common": "^0.15.0",
     "@vendure/core": "^0.15.2",
-    "express": "^4.16.4",
-    "rimraf": "^3.0.0",
-    "typescript": "3.8.3"
+    "express": "^4.17.1",
+    "rimraf": "^3.0.2",
+    "typescript": "4.0.3"
   },
   "dependencies": {
-    "fs-extra": "^9.0.0"
+    "fs-extra": "^9.0.1"
   }
 }

packages/admin-ui-plugin/src/constants.ts

@@ -10,6 +10,7 @@ export const defaultAvailableLanguages = [
     LanguageCode.en,
     LanguageCode.es,
     LanguageCode.pl,
-    LanguageCode.zh,
+    LanguageCode.zh_Hans,
+    LanguageCode.zh_Hant,
     LanguageCode.pt_BR,
 ];

packages/admin-ui-plugin/src/plugin.ts

@@ -21,7 +21,7 @@ import fs from 'fs-extra';
 import { Server } from 'http';
 import path from 'path';
 
-import { defaultAvailableLanguages, defaultLanguage, DEFAULT_APP_PATH, loggerCtx } from './constants';
+import { DEFAULT_APP_PATH, defaultAvailableLanguages, defaultLanguage, loggerCtx } from './constants';
 
 /**
  * @description

packages/admin-ui/i18n-coverage.json

@@ -1,41 +1,41 @@
 {
-  "generatedOn": "2020-08-26T08:49:50.552Z",
-  "lastCommit": "8881aee83b25f57edba537fbdcb85c77bf5f3c4e",
+  "generatedOn": "2020-10-05T10:27:57.372Z",
+  "lastCommit": "30dc63957a149d7175935cb31047cd46016b73bc",
   "translationStatus": {
     "de": {
-      "tokenCount": 662,
-      "translatedCount": 610,
-      "percentage": 92
+      "tokenCount": 672,
+      "translatedCount": 609,
+      "percentage": 91
     },
     "en": {
-      "tokenCount": 662,
-      "translatedCount": 662,
+      "tokenCount": 672,
+      "translatedCount": 672,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 662,
-      "translatedCount": 467,
-      "percentage": 71
+      "tokenCount": 672,
+      "translatedCount": 466,
+      "percentage": 69
     },
     "pl": {
-      "tokenCount": 662,
-      "translatedCount": 566,
-      "percentage": 85
+      "tokenCount": 672,
+      "translatedCount": 564,
+      "percentage": 84
     },
     "pt_BR": {
-      "tokenCount": 662,
-      "translatedCount": 657,
-      "percentage": 99
+      "tokenCount": 672,
+      "translatedCount": 655,
+      "percentage": 97
     },
     "zh_Hans": {
-      "tokenCount": 662,
-      "translatedCount": 550,
-      "percentage": 83
+      "tokenCount": 672,
+      "translatedCount": 548,
+      "percentage": 82
     },
     "zh_Hant": {
-      "tokenCount": 662,
-      "translatedCount": 550,
-      "percentage": 83
+      "tokenCount": 672,
+      "translatedCount": 548,
+      "percentage": 82
     }
   }
 }

packages/admin-ui/package.json

@@ -18,82 +18,78 @@
     "directory": "package"
   },
   "dependencies": {
-    "@angular/animations": "9.1.7",
-    "@angular/cdk": "9.2.3",
-    "@angular/common": "9.1.7",
-    "@angular/core": "9.1.7",
-    "@angular/forms": "9.1.7",
-    "@angular/language-service": "9.1.7",
-    "@angular/platform-browser": "9.1.7",
-    "@angular/platform-browser-dynamic": "9.1.7",
-    "@angular/router": "9.1.7",
+    "@angular/animations": "10.1.4",
+    "@angular/cdk": "10.2.4",
+    "@angular/common": "10.1.4",
+    "@angular/core": "10.1.4",
+    "@angular/forms": "10.1.4",
+    "@angular/language-service": "10.1.4",
+    "@angular/platform-browser": "10.1.4",
+    "@angular/platform-browser-dynamic": "10.1.4",
+    "@angular/router": "10.1.4",
+    "@apollo/client": "^3.0.0",
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
-    "@clr/angular": "^3.0.0",
-    "@clr/core": "^3.0.0",
-    "@clr/icons": "^3.0.0",
-    "@clr/ui": "^3.0.0",
-    "@ng-select/ng-select": "^3.7.2",
-    "@ngx-translate/core": "^12.1.2",
-    "@ngx-translate/http-loader": "^4.0.0",
+    "@clr/angular": "^4.0.3",
+    "@clr/core": "^4.0.3",
+    "@clr/icons": "^4.0.3",
+    "@clr/ui": "^4.0.3",
+    "@ng-select/ng-select": "^5.0.3",
+    "@ngx-translate/core": "^13.0.0",
+    "@ngx-translate/http-loader": "^6.0.0",
     "@vendure/common": "^0.15.0",
     "@webcomponents/custom-elements": "^1.2.4",
-    "apollo-angular": "^1.8.0",
-    "apollo-cache-inmemory": "^1.6.5",
-    "apollo-client": "^2.6.8",
-    "apollo-link": "^1.2.13",
-    "apollo-link-context": "^1.0.19",
+    "apollo-angular": "^2.0.4",
     "apollo-upload-client": "^12.1.0",
     "core-js": "^3.1.3",
-    "dayjs": "^1.8.20",
-    "graphql": "^14.6.0",
-    "graphql-tag": "^2.10.3",
+    "dayjs": "^1.9.1",
+    "graphql": "15.3.0",
     "messageformat": "2.3.0",
     "ngx-pagination": "^5.0.0",
-    "ngx-translate-messageformat-compiler": "^4.6.0",
-    "prosemirror-commands": "^1.0.0",
-    "prosemirror-dropcursor": "^1.0.0",
-    "prosemirror-gapcursor": "^1.0.0",
-    "prosemirror-history": "^1.0.0",
-    "prosemirror-inputrules": "^1.0.0",
-    "prosemirror-keymap": "^1.0.0",
-    "prosemirror-menu": "^1.0.0",
+    "ngx-translate-messageformat-compiler": "^4.8.0",
+    "prosemirror-commands": "^1.1.4",
+    "prosemirror-dropcursor": "^1.3.2",
+    "prosemirror-gapcursor": "^1.1.5",
+    "prosemirror-history": "^1.1.3",
+    "prosemirror-inputrules": "^1.1.3",
+    "prosemirror-keymap": "^1.1.4",
+    "prosemirror-menu": "^1.1.4",
     "prosemirror-schema-basic": "^1.1.2",
-    "prosemirror-schema-list": "^1.0.0",
-    "prosemirror-state": "^1.0.0",
-    "rxjs": "^6.5.4",
-    "tslib": "^1.10.0",
+    "prosemirror-schema-list": "^1.1.4",
+    "prosemirror-state": "^1.3.3",
+    "rxjs": "^6.6.3",
+    "tslib": "^2.0.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.6",
-    "@angular-devkit/build-ng-packagr": "~0.901.6",
-    "@angular/cli": "^9.1.6",
-    "@angular/compiler": "^9.1.7",
-    "@angular/compiler-cli": "^9.1.7",
+    "@angular-devkit/build-angular": "~0.1001.4",
+    "@angular-devkit/build-ng-packagr": "~0.1001.4",
+    "@angular/cli": "^10.1.4",
+    "@angular/compiler": "^10.1.4",
+    "@angular/compiler-cli": "^10.1.4",
     "@biesbjerg/ngx-translate-extract": "^6.0.3",
     "@types/jasmine": "~3.5.10",
     "@types/jasminewd2": "~2.0.6",
     "@types/node": "^12.11.1",
-    "@types/prosemirror-commands": "^1.0.1",
-    "@types/prosemirror-menu": "^1.0.1",
-    "@types/prosemirror-state": "^1.2.3",
-    "@types/prosemirror-view": "^1.11.2",
+    "@types/prosemirror-commands": "^1.0.3",
+    "@types/prosemirror-menu": "^1.0.2",
+    "@types/prosemirror-state": "^1.2.5",
+    "@types/prosemirror-view": "1.15.1",
     "codelyzer": "^5.2.2",
     "cross-spawn": "^7.0.3",
     "fs-extra": "^9.0.0",
     "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~5.0.1",
-    "karma": "~4.4.1",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.1",
-    "karma-jasmine": "~3.1.1",
-    "karma-jasmine-html-reporter": "^1.5.3",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "^2.2.5",
-    "ng-packagr": "^9.0.0",
-    "protractor": "~5.4.2",
+    "ng-packagr": "^10.1.0",
+    "protractor": "~7.0.0",
     "puppeteer": "^2.1.1",
     "rimraf": "^3.0.0",
-    "tslint": "^6.1.0",
-    "typescript": "3.8.3"
+    "tslint": "~6.1.0",
+    "typescript": "4.0.3"
   }
 }

packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.ts

@@ -21,7 +21,8 @@ import { debounceTime, finalize, map, switchMap, takeUntil } from 'rxjs/operator
     templateUrl: './asset-list.component.html',
     styleUrls: ['./asset-list.component.scss'],
 })
-export class AssetListComponent extends BaseListComponent<GetAssetList.Query, GetAssetList.Items>
+export class AssetListComponent
+    extends BaseListComponent<GetAssetList.Query, GetAssetList.Items>
     implements OnInit {
     searchTerm = new FormControl('');
     uploading = false;
@@ -37,7 +38,7 @@ export class AssetListComponent extends BaseListComponent<GetAssetList.Query, Ge
         super(router, route);
         super.setQueryFn(
             (...args: any[]) => this.dataService.product.getAssetList(...args),
-            (data) => data.assets,
+            data => data.assets,
             (skip, take) => ({
                 options: {
                     skip,
@@ -71,26 +72,39 @@ export class AssetListComponent extends BaseListComponent<GetAssetList.Query, Ge
             this.dataService.product
                 .createAssets(files)
                 .pipe(finalize(() => (this.uploading = false)))
-                .subscribe((res) => {
-                    super.refresh();
-                    this.notificationService.success(_('asset.notify-create-assets-success'), {
-                        count: files.length,
-                    });
+                .subscribe(({ createAssets }) => {
+                    let successCount = 0;
+                    for (const result of createAssets) {
+                        switch (result.__typename) {
+                            case 'Asset':
+                                successCount++;
+                                break;
+                            case 'MimeTypeError':
+                                this.notificationService.error(result.message);
+                                break;
+                        }
+                    }
+                    if (0 < successCount) {
+                        super.refresh();
+                        this.notificationService.success(_('asset.notify-create-assets-success'), {
+                            count: successCount,
+                        });
+                    }
                 });
         }
     }
 
     deleteAssets(assets: Asset[]) {
-        this.showModalAndDelete(assets.map((a) => a.id))
+        this.showModalAndDelete(assets.map(a => a.id))
             .pipe(
-                switchMap((response) => {
+                switchMap(response => {
                     if (response.result === DeletionResult.DELETED) {
                         return [true];
                     } else {
                         return this.showModalAndDelete(
-                            assets.map((a) => a.id),
+                            assets.map(a => a.id),
                             response.message || '',
-                        ).pipe(map((r) => r.result === DeletionResult.DELETED));
+                        ).pipe(map(r => r.result === DeletionResult.DELETED));
                     }
                 }),
             )
@@ -101,7 +115,7 @@ export class AssetListComponent extends BaseListComponent<GetAssetList.Query, Ge
                     });
                     this.refresh();
                 },
-                (err) => {
+                err => {
                     this.notificationService.error(_('common.notify-delete-error'), {
                         entity: 'Assets',
                     });
@@ -123,10 +137,8 @@ export class AssetListComponent extends BaseListComponent<GetAssetList.Query, Ge
                 ],
             })
             .pipe(
-                switchMap((res) =>
-                    res ? this.dataService.product.deleteAssets(assetIds, !!message) : EMPTY,
-                ),
-                map((res) => res.deleteAssets),
+                switchMap(res => (res ? this.dataService.product.deleteAssets(assetIds, !!message) : EMPTY)),
+                map(res => res.deleteAssets),
             );
     }
 }

packages/admin-ui/src/lib/catalog/src/components/product-assets/product-assets.component.ts

@@ -11,7 +11,12 @@ import {
     Output,
     ViewChild,
 } from '@angular/core';
-import { Asset, AssetPickerDialogComponent, AssetPreviewDialogComponent, ModalService } from '@vendure/admin-ui/core';
+import {
+    Asset,
+    AssetPickerDialogComponent,
+    AssetPreviewDialogComponent,
+    ModalService,
+} from '@vendure/admin-ui/core';
 import { unique } from '@vendure/common/lib/unique';
 
 export interface AssetChange {
@@ -189,13 +194,13 @@ export class ProductAssetsComponent implements AfterViewInit {
             );
         }
 
-        this.placeholder.enter(
-            drag,
+        this.placeholder._dropListRef.enter(
+            drag._dragRef,
             drag.element.nativeElement.offsetLeft,
             drag.element.nativeElement.offsetTop,
         );
         return false;
-    }
+    };
 
     /** Determines the point of the page that was touched by the user. */
     getPointerPositionOnPage(event: MouseEvent | TouchEvent) {

packages/admin-ui/src/lib/core/src/common/base-list.component.ts

@@ -1,4 +1,4 @@
-import { OnDestroy, OnInit } from '@angular/core';
+import { Directive, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs';
 import { map, shareReplay, takeUntil } from 'rxjs/operators';
@@ -10,9 +10,10 @@ export type MappingFn<T, R> = (result: R) => { items: T[]; totalItems: number };
 export type OnPageChangeFn<V> = (skip: number, take: number) => V;
 
 /**
- * This is a base class which implements the logic required to fetch and manipluate
+ * This is a base class which implements the logic required to fetch and manipulate
  * a list of data from a query which returns a PaginatedList type.
  */
+@Directive()
 export class BaseListComponent<ResultType, ItemType, VariableType = any> implements OnInit, OnDestroy {
     result$: Observable<ResultType>;
     items$: Observable<ItemType[]>;
@@ -24,7 +25,7 @@ export class BaseListComponent<ResultType, ItemType, VariableType = any> impleme
     private listQueryFn: ListQueryFn<ResultType>;
     private mappingFn: MappingFn<ItemType, ResultType>;
     private onPageChangeFn: OnPageChangeFn<VariableType> = (skip, take) =>
-        ({ options: { skip, take } } as any)
+        ({ options: { skip, take } } as any);
     private refresh$ = new BehaviorSubject<undefined>(undefined);
 
     constructor(protected router: Router, protected route: ActivatedRoute) {}

packages/admin-ui/src/lib/core/src/common/introspection-result.ts

@@ -1,284 +1,155 @@
 // tslint:disable
 
-export interface IntrospectionResultData {
-    __schema: {
-        types: {
-            kind: string;
-            name: string;
-            possibleTypes: {
-                name: string;
-            }[];
-        }[];
+export interface PossibleTypesResultData {
+    possibleTypes: {
+        [key: string]: string[];
     };
 }
-const result: IntrospectionResultData = {
-    __schema: {
-        types: [
-            {
-                kind: 'INTERFACE',
-                name: 'Node',
-                possibleTypes: [
-                    {
-                        name: 'Channel',
-                    },
-                    {
-                        name: 'Zone',
-                    },
-                    {
-                        name: 'Country',
-                    },
-                    {
-                        name: 'Administrator',
-                    },
-                    {
-                        name: 'User',
-                    },
-                    {
-                        name: 'Role',
-                    },
-                    {
-                        name: 'AuthenticationMethod',
-                    },
-                    {
-                        name: 'Asset',
-                    },
-                    {
-                        name: 'Collection',
-                    },
-                    {
-                        name: 'ProductVariant',
-                    },
-                    {
-                        name: 'StockAdjustment',
-                    },
-                    {
-                        name: 'Sale',
-                    },
-                    {
-                        name: 'OrderLine',
-                    },
-                    {
-                        name: 'OrderItem',
-                    },
-                    {
-                        name: 'Fulfillment',
-                    },
-                    {
-                        name: 'Order',
-                    },
-                    {
-                        name: 'Customer',
-                    },
-                    {
-                        name: 'CustomerGroup',
-                    },
-                    {
-                        name: 'HistoryEntry',
-                    },
-                    {
-                        name: 'Address',
-                    },
-                    {
-                        name: 'Promotion',
-                    },
-                    {
-                        name: 'Payment',
-                    },
-                    {
-                        name: 'Refund',
-                    },
-                    {
-                        name: 'ShippingMethod',
-                    },
-                    {
-                        name: 'Cancellation',
-                    },
-                    {
-                        name: 'Return',
-                    },
-                    {
-                        name: 'Product',
-                    },
-                    {
-                        name: 'ProductOptionGroup',
-                    },
-                    {
-                        name: 'ProductOption',
-                    },
-                    {
-                        name: 'FacetValue',
-                    },
-                    {
-                        name: 'Facet',
-                    },
-                    {
-                        name: 'TaxRate',
-                    },
-                    {
-                        name: 'TaxCategory',
-                    },
-                    {
-                        name: 'Job',
-                    },
-                    {
-                        name: 'PaymentMethod',
-                    },
-                ],
-            },
-            {
-                kind: 'INTERFACE',
-                name: 'PaginatedList',
-                possibleTypes: [
-                    {
-                        name: 'AdministratorList',
-                    },
-                    {
-                        name: 'AssetList',
-                    },
-                    {
-                        name: 'ProductVariantList',
-                    },
-                    {
-                        name: 'CustomerList',
-                    },
-                    {
-                        name: 'HistoryEntryList',
-                    },
-                    {
-                        name: 'OrderList',
-                    },
-                    {
-                        name: 'CollectionList',
-                    },
-                    {
-                        name: 'CountryList',
-                    },
-                    {
-                        name: 'CustomerGroupList',
-                    },
-                    {
-                        name: 'FacetList',
-                    },
-                    {
-                        name: 'JobList',
-                    },
-                    {
-                        name: 'PaymentMethodList',
-                    },
-                    {
-                        name: 'ProductList',
-                    },
-                    {
-                        name: 'PromotionList',
-                    },
-                    {
-                        name: 'RoleList',
-                    },
-                    {
-                        name: 'ShippingMethodList',
-                    },
-                    {
-                        name: 'TaxRateList',
-                    },
-                ],
-            },
-            {
-                kind: 'UNION',
-                name: 'StockMovementItem',
-                possibleTypes: [
-                    {
-                        name: 'StockAdjustment',
-                    },
-                    {
-                        name: 'Sale',
-                    },
-                    {
-                        name: 'Cancellation',
-                    },
-                    {
-                        name: 'Return',
-                    },
-                ],
-            },
-            {
-                kind: 'INTERFACE',
-                name: 'StockMovement',
-                possibleTypes: [
-                    {
-                        name: 'StockAdjustment',
-                    },
-                    {
-                        name: 'Sale',
-                    },
-                    {
-                        name: 'Cancellation',
-                    },
-                    {
-                        name: 'Return',
-                    },
-                ],
-            },
-            {
-                kind: 'UNION',
-                name: 'CustomFieldConfig',
-                possibleTypes: [
-                    {
-                        name: 'StringCustomFieldConfig',
-                    },
-                    {
-                        name: 'LocaleStringCustomFieldConfig',
-                    },
-                    {
-                        name: 'IntCustomFieldConfig',
-                    },
-                    {
-                        name: 'FloatCustomFieldConfig',
-                    },
-                    {
-                        name: 'BooleanCustomFieldConfig',
-                    },
-                    {
-                        name: 'DateTimeCustomFieldConfig',
-                    },
-                ],
-            },
-            {
-                kind: 'INTERFACE',
-                name: 'CustomField',
-                possibleTypes: [
-                    {
-                        name: 'StringCustomFieldConfig',
-                    },
-                    {
-                        name: 'LocaleStringCustomFieldConfig',
-                    },
-                    {
-                        name: 'IntCustomFieldConfig',
-                    },
-                    {
-                        name: 'FloatCustomFieldConfig',
-                    },
-                    {
-                        name: 'BooleanCustomFieldConfig',
-                    },
-                    {
-                        name: 'DateTimeCustomFieldConfig',
-                    },
-                ],
-            },
-            {
-                kind: 'UNION',
-                name: 'SearchResultPrice',
-                possibleTypes: [
-                    {
-                        name: 'PriceRange',
-                    },
-                    {
-                        name: 'SinglePrice',
-                    },
-                ],
-            },
+const result: PossibleTypesResultData = {
+    possibleTypes: {
+        CreateAssetResult: ['Asset', 'MimeTypeError'],
+        NativeAuthenticationResult: ['CurrentUser', 'InvalidCredentialsError', 'NativeAuthStrategyError'],
+        AuthenticationResult: ['CurrentUser', 'InvalidCredentialsError'],
+        CreateChannelResult: ['Channel', 'LanguageNotAvailableError'],
+        UpdateChannelResult: ['Channel', 'LanguageNotAvailableError'],
+        CreateCustomerResult: ['Customer', 'EmailAddressConflictError'],
+        UpdateCustomerResult: ['Customer', 'EmailAddressConflictError'],
+        UpdateGlobalSettingsResult: ['GlobalSettings', 'ChannelDefaultLanguageError'],
+        TransitionOrderToStateResult: ['Order', 'OrderStateTransitionError'],
+        SettlePaymentResult: [
+            'Payment',
+            'SettlePaymentError',
+            'PaymentStateTransitionError',
+            'OrderStateTransitionError',
         ],
+        AddFulfillmentToOrderResult: [
+            'Fulfillment',
+            'EmptyOrderLineSelectionError',
+            'ItemsAlreadyFulfilledError',
+        ],
+        CancelOrderResult: [
+            'Order',
+            'EmptyOrderLineSelectionError',
+            'QuantityTooGreatError',
+            'MultipleOrderError',
+            'CancelActiveOrderError',
+            'OrderStateTransitionError',
+        ],
+        RefundOrderResult: [
+            'Refund',
+            'QuantityTooGreatError',
+            'NothingToRefundError',
+            'OrderStateTransitionError',
+            'MultipleOrderError',
+            'PaymentOrderMismatchError',
+            'RefundOrderStateError',
+            'AlreadyRefundedError',
+            'RefundStateTransitionError',
+        ],
+        SettleRefundResult: ['Refund', 'RefundStateTransitionError'],
+        TransitionFulfillmentToStateResult: ['Fulfillment', 'FulfillmentStateTransitionError'],
+        RemoveOptionGroupFromProductResult: ['Product', 'ProductOptionInUseError'],
+        CreatePromotionResult: ['Promotion', 'MissingConditionsError'],
+        UpdatePromotionResult: ['Promotion', 'MissingConditionsError'],
+        PaginatedList: [
+            'CustomerGroupList',
+            'JobList',
+            'PaymentMethodList',
+            'AdministratorList',
+            'AssetList',
+            'CollectionList',
+            'ProductVariantList',
+            'CountryList',
+            'CustomerList',
+            'FacetList',
+            'HistoryEntryList',
+            'OrderList',
+            'ProductList',
+            'PromotionList',
+            'RoleList',
+            'ShippingMethodList',
+            'TaxRateList',
+        ],
+        Node: [
+            'Collection',
+            'Customer',
+            'Facet',
+            'Fulfillment',
+            'Job',
+            'Order',
+            'Product',
+            'ProductVariant',
+            'Address',
+            'Administrator',
+            'Asset',
+            'Channel',
+            'Country',
+            'CustomerGroup',
+            'FacetValue',
+            'HistoryEntry',
+            'OrderItem',
+            'OrderLine',
+            'Payment',
+            'Refund',
+            'PaymentMethod',
+            'ProductOptionGroup',
+            'ProductOption',
+            'Promotion',
+            'Role',
+            'ShippingMethod',
+            'StockAdjustment',
+            'Sale',
+            'Cancellation',
+            'Return',
+            'TaxCategory',
+            'TaxRate',
+            'User',
+            'AuthenticationMethod',
+            'Zone',
+        ],
+        ErrorResult: [
+            'MimeTypeError',
+            'LanguageNotAvailableError',
+            'ChannelDefaultLanguageError',
+            'SettlePaymentError',
+            'EmptyOrderLineSelectionError',
+            'ItemsAlreadyFulfilledError',
+            'MultipleOrderError',
+            'CancelActiveOrderError',
+            'PaymentOrderMismatchError',
+            'RefundOrderStateError',
+            'NothingToRefundError',
+            'AlreadyRefundedError',
+            'QuantityTooGreatError',
+            'RefundStateTransitionError',
+            'PaymentStateTransitionError',
+            'FulfillmentStateTransitionError',
+            'ProductOptionInUseError',
+            'MissingConditionsError',
+            'NativeAuthStrategyError',
+            'InvalidCredentialsError',
+            'OrderStateTransitionError',
+            'EmailAddressConflictError',
+        ],
+        CustomField: [
+            'StringCustomFieldConfig',
+            'LocaleStringCustomFieldConfig',
+            'IntCustomFieldConfig',
+            'FloatCustomFieldConfig',
+            'BooleanCustomFieldConfig',
+            'DateTimeCustomFieldConfig',
+        ],
+        CustomFieldConfig: [
+            'StringCustomFieldConfig',
+            'LocaleStringCustomFieldConfig',
+            'IntCustomFieldConfig',
+            'FloatCustomFieldConfig',
+            'BooleanCustomFieldConfig',
+            'DateTimeCustomFieldConfig',
+        ],
+        SearchResultPrice: ['PriceRange', 'SinglePrice'],
+        StockMovement: ['StockAdjustment', 'Sale', 'Cancellation', 'Return'],
+        StockMovementItem: ['StockAdjustment', 'Sale', 'Cancellation', 'Return'],
     },
 };
 export default result;

packages/admin-ui/src/lib/core/src/data/check-jobs-link.ts

@@ -1,5 +1,5 @@
 import { Injector } from '@angular/core';
-import { ApolloLink, Operation } from 'apollo-link';
+import { ApolloLink, Operation } from '@apollo/client/core';
 
 import { JobQueueService } from '../providers/job-queue/job-queue.service';
 

packages/admin-ui/src/lib/core/src/data/client-state/client-resolvers.ts

@@ -1,4 +1,4 @@
-import { InMemoryCache } from 'apollo-cache-inmemory';
+import { InMemoryCache } from '@apollo/client/core';
 
 import {
     GetNetworkStatus,
@@ -11,7 +11,7 @@ import {
     UpdateUserChannels,
     UserStatus,
 } from '../../common/generated-types';
-import { GET_NEWTORK_STATUS, GET_USER_STATUS } from '../definitions/client-definitions';
+import { GET_NEWTORK_STATUS, GET_UI_STATE, GET_USER_STATUS } from '../definitions/client-definitions';
 
 export type ResolverContext = {
     cache: InMemoryCache;
@@ -50,7 +50,7 @@ export const clientResolvers: ResolverDefinition = {
                     activeChannelId,
                 },
             };
-            cache.writeData({ data });
+            cache.writeQuery({ query: GET_USER_STATUS, data });
             return data.userStatus;
         },
         setAsLoggedOut: (_, args, { cache }): GetUserStatus.UserStatus => {
@@ -65,7 +65,7 @@ export const clientResolvers: ResolverDefinition = {
                     activeChannelId: null,
                 },
             };
-            cache.writeData({ data });
+            cache.writeQuery({ query: GET_USER_STATUS, data });
             return data.userStatus;
         },
         setUiLanguage: (_, args: SetUiLanguage.Variables, { cache }): LanguageCode => {
@@ -75,7 +75,7 @@ export const clientResolvers: ResolverDefinition = {
                     language: args.languageCode,
                 },
             };
-            cache.writeData({ data });
+            cache.writeQuery({ query: GET_UI_STATE, data });
             return args.languageCode;
         },
         setActiveChannel: (_, args: SetActiveChannel.Variables, { cache }): UserStatus => {
@@ -93,7 +93,7 @@ export const clientResolvers: ResolverDefinition = {
                     activeChannelId: activeChannel.id,
                 },
             };
-            cache.writeData({ data });
+            cache.writeQuery({ query: GET_USER_STATUS, data });
             return { ...previous.userStatus, ...data.userStatus };
         },
         updateUserChannels: (_, args: UpdateUserChannels.Variables, { cache }): UserStatus => {
@@ -105,7 +105,7 @@ export const clientResolvers: ResolverDefinition = {
                     channels: args.channels,
                 },
             };
-            cache.writeData({ data });
+            cache.writeQuery({ query: GET_USER_STATUS, data });
             return { ...previous.userStatus, ...data.userStatus };
         },
     },
@@ -120,6 +120,6 @@ function updateRequestsInFlight(cache: InMemoryCache, increment: 1 | -1): number
             inFlightRequests,
         },
     };
-    cache.writeData({ data });
+    cache.writeQuery({ query: GET_NEWTORK_STATUS, data });
     return inFlightRequests;
 }

packages/admin-ui/src/lib/core/src/data/data.module.ts

@@ -1,10 +1,9 @@
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { APP_INITIALIZER, Injector, NgModule } from '@angular/core';
-import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
-import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
-import { ApolloClientOptions } from 'apollo-client';
-import { ApolloLink } from 'apollo-link';
-import { setContext } from 'apollo-link-context';
+import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
+import { setContext } from '@apollo/client/link/context';
+import { ApolloLink } from '@apollo/client/link/core';
+import { APOLLO_OPTIONS } from 'apollo-angular';
 import { createUploadLink } from 'apollo-upload-client';
 
 import { getAppConfig } from '../app.config';
@@ -14,6 +13,7 @@ import { LocalStorageService } from '../providers/local-storage/local-storage.se
 import { CheckJobsLink } from './check-jobs-link';
 import { getClientDefaults } from './client-state/client-defaults';
 import { clientResolvers } from './client-state/client-resolvers';
+import { GET_CLIENT_STATE } from './definitions/client-definitions';
 import { OmitTypenameLink } from './omit-typename-link';
 import { BaseDataService } from './providers/base-data.service';
 import { DataService } from './providers/data.service';
@@ -30,11 +30,10 @@ export function createApollo(
     const { adminApiPath, tokenMethod } = getAppConfig();
     const serverLocation = getServerLocation();
     const apolloCache = new InMemoryCache({
-        fragmentMatcher: new IntrospectionFragmentMatcher({
-            introspectionQueryResultData: introspectionResult,
-        }),
+        possibleTypes: introspectionResult.possibleTypes,
     });
-    apolloCache.writeData({
+    apolloCache.writeQuery({
+        query: GET_CLIENT_STATE,
         data: getClientDefaults(localStorageService),
     });
 
@@ -76,7 +75,7 @@ export function createApollo(
  * state via the apollo-link-state package.
  */
 @NgModule({
-    imports: [ApolloModule, HttpClientModule],
+    imports: [HttpClientModule],
     exports: [],
     declarations: [],
     providers: [

packages/admin-ui/src/lib/core/src/data/definitions/administrator-definitions.ts

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag';
+import { gql } from 'apollo-angular';
 
 export const ROLE_FRAGMENT = gql`
     fragment Role on Role {

packages/admin-ui/src/lib/core/src/data/definitions/auth-definitions.ts

@@ -1,4 +1,6 @@
-import gql from 'graphql-tag';
+import { gql } from 'apollo-angular';
+
+import { ERROR_RESULT_FRAGMENT } from './shared-definitions';
 
 export const CURRENT_USER_FRAGMENT = gql`
     fragment CurrentUser on CurrentUser {
@@ -16,17 +18,19 @@ export const CURRENT_USER_FRAGMENT = gql`
 export const ATTEMPT_LOGIN = gql`
     mutation AttemptLogin($username: String!, $password: String!, $rememberMe: Boolean!) {
         login(username: $username, password: $password, rememberMe: $rememberMe) {
-            user {
-                ...CurrentUser
-            }
+            ...CurrentUser
+            ...ErrorResult
         }
     }
     ${CURRENT_USER_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
 
 export const LOG_OUT = gql`
     mutation LogOut {
-        logout
+        logout {
+            success
+        }
     }
 `;
 

packages/admin-ui/src/lib/core/src/data/definitions/client-definitions.ts

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag';
+import { gql } from 'apollo-angular';
 
 export const REQUEST_STARTED = gql`
     mutation RequestStarted {
@@ -77,6 +77,21 @@ export const GET_UI_STATE = gql`
     }
 `;
 
+export const GET_CLIENT_STATE = gql`
+    query GetClientState {
+        networkStatus @client {
+            inFlightRequests
+        }
+        userStatus @client {
+            ...UserStatus
+        }
+        uiState @client {
+            language
+        }
+    }
+    ${USER_STATUS_FRAGMENT}
+`;
+
 export const SET_ACTIVE_CHANNEL = gql`
     mutation SetActiveChannel($channelId: ID!) {
         setActiveChannel(channelId: $channelId) @client {

packages/admin-ui/src/lib/core/src/data/definitions/collection-definitions.ts

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag';
+import { gql } from 'apollo-angular';
 
 import { ASSET_FRAGMENT } from './product-definitions';
 import { CONFIGURABLE_OPERATION_DEF_FRAGMENT, CONFIGURABLE_OPERATION_FRAGMENT } from './shared-definitions';

packages/admin-ui/src/lib/core/src/data/definitions/customer-definitions.ts

@@ -1,4 +1,6 @@
-import gql from 'graphql-tag';
+import { gql } from 'apollo-angular';
+
+import { ERROR_RESULT_FRAGMENT } from './shared-definitions';
 
 export const ADDRESS_FRAGMENT = gql`
     fragment Address on Address {
@@ -95,18 +97,22 @@ export const CREATE_CUSTOMER = gql`
     mutation CreateCustomer($input: CreateCustomerInput!, $password: String) {
         createCustomer(input: $input, password: $password) {
             ...Customer
+            ...ErrorResult
         }
     }
     ${CUSTOMER_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
 
 export const UPDATE_CUSTOMER = gql`
     mutation UpdateCustomer($input: UpdateCustomerInput!) {
         updateCustomer(input: $input) {
             ...Customer
+            ...ErrorResult
         }
     }
     ${CUSTOMER_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
 
 export const DELETE_CUSTOMER = gql`

packages/admin-ui/src/lib/core/src/data/definitions/facet-definitions.ts

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag';
+import { gql } from 'apollo-angular';
 
 export const FACET_VALUE_FRAGMENT = gql`
     fragment FacetValue on FacetValue {

packages/admin-ui/src/lib/core/src/data/definitions/order-definitions.ts

@@ -1,4 +1,6 @@
-import gql from 'graphql-tag';
+import { gql } from 'apollo-angular';
+
+import { ERROR_RESULT_FRAGMENT } from './shared-definitions';
 
 export const ADJUSTMENT_FRAGMENT = gql`
     fragment Adjustment on Adjustment {
@@ -56,6 +58,8 @@ export const ORDER_FRAGMENT = gql`
 export const FULFILLMENT_FRAGMENT = gql`
     fragment Fulfillment on Fulfillment {
         id
+        state
+        nextStates
         createdAt
         updatedAt
         method
@@ -197,50 +201,71 @@ export const GET_ORDER = gql`
 export const SETTLE_PAYMENT = gql`
     mutation SettlePayment($id: ID!) {
         settlePayment(id: $id) {
-            id
-            transactionId
-            amount
-            method
-            state
-            metadata
+            ... on Payment {
+                id
+                transactionId
+                amount
+                method
+                state
+                metadata
+            }
+            ...ErrorResult
+            ... on SettlePaymentError {
+                paymentErrorMessage
+            }
+            ... on PaymentStateTransitionError {
+                transitionError
+            }
+            ... on OrderStateTransitionError {
+                transitionError
+            }
         }
     }
+    ${ERROR_RESULT_FRAGMENT}
 `;
 
 export const CREATE_FULFILLMENT = gql`
     mutation CreateFulfillment($input: FulfillOrderInput!) {
-        fulfillOrder(input: $input) {
+        addFulfillmentToOrder(input: $input) {
             ...Fulfillment
+            ...ErrorResult
         }
     }
     ${FULFILLMENT_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
 
 export const CANCEL_ORDER = gql`
     mutation CancelOrder($input: CancelOrderInput!) {
         cancelOrder(input: $input) {
             ...OrderDetail
+            ...ErrorResult
         }
     }
     ${ORDER_DETAIL_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
 
 export const REFUND_ORDER = gql`
     mutation RefundOrder($input: RefundOrderInput!) {
         refundOrder(input: $input) {
             ...Refund
+            ...ErrorResult
         }
     }
     ${REFUND_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
 
 export const SETTLE_REFUND = gql`
     mutation SettleRefund($input: SettleRefundInput!) {
         settleRefund(input: $input) {
             ...Refund
+            ...ErrorResult
         }
     }
     ${REFUND_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
 
 export const GET_ORDER_HISTORY = gql`
@@ -297,9 +322,14 @@ export const TRANSITION_ORDER_TO_STATE = gql`
     mutation TransitionOrderToState($id: ID!, $state: String!) {
         transitionOrderToState(id: $id, state: $state) {
             ...Order
+            ...ErrorResult
+            ... on OrderStateTransitionError {
+                transitionError
+            }
         }
     }
     ${ORDER_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
 
 export const UPDATE_ORDER_CUSTOM_FIELDS = gql`
@@ -310,3 +340,17 @@ export const UPDATE_ORDER_CUSTOM_FIELDS = gql`
     }
     ${ORDER_FRAGMENT}
 `;
+
+export const TRANSITION_FULFILLMENT_TO_STATE = gql`
+    mutation TransitionFulfillmentToState($id: ID!, $state: String!) {
+        transitionFulfillmentToState(id: $id, state: $state) {
+            ...Fulfillment
+            ...ErrorResult
+            ... on FulfillmentStateTransitionError {
+                transitionError
+            }
+        }
+    }
+    ${FULFILLMENT_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
+`;

packages/admin-ui/src/lib/core/src/data/definitions/product-definitions.ts

@@ -1,4 +1,6 @@
-import gql from 'graphql-tag';
+import { gql } from 'apollo-angular';
+
+import { ERROR_RESULT_FRAGMENT } from './shared-definitions';
 
 export const ASSET_FRAGMENT = gql`
     fragment Asset on Asset {
@@ -274,23 +276,27 @@ export const ADD_OPTION_GROUP_TO_PRODUCT = gql`
 export const REMOVE_OPTION_GROUP_FROM_PRODUCT = gql`
     mutation RemoveOptionGroupFromProduct($productId: ID!, $optionGroupId: ID!) {
         removeOptionGroupFromProduct(productId: $productId, optionGroupId: $optionGroupId) {
-            id
-            createdAt
-            updatedAt
-            optionGroups {
+            ... on Product {
                 id
                 createdAt
                 updatedAt
-                code
-                options {
+                optionGroups {
                     id
                     createdAt
                     updatedAt
                     code
+                    options {
+                        id
+                        createdAt
+                        updatedAt
+                        code
+                    }
                 }
             }
+            ...ErrorResult
         }
     }
+    ${ERROR_RESULT_FRAGMENT}
 `;
 
 export const GET_PRODUCT_WITH_VARIANTS = gql`
@@ -371,6 +377,9 @@ export const CREATE_ASSETS = gql`
     mutation CreateAssets($input: [CreateAssetInput!]!) {
         createAssets(input: $input) {
             ...Asset
+            ... on ErrorResult {
+                message
+            }
         }
     }
     ${ASSET_FRAGMENT}

packages/admin-ui/src/lib/core/src/data/definitions/promotion-definitions.ts

@@ -1,6 +1,10 @@
-import gql from 'graphql-tag';
+import { gql } from 'apollo-angular';
 
-import { CONFIGURABLE_OPERATION_DEF_FRAGMENT, CONFIGURABLE_OPERATION_FRAGMENT } from './shared-definitions';
+import {
+    CONFIGURABLE_OPERATION_DEF_FRAGMENT,
+    CONFIGURABLE_OPERATION_FRAGMENT,
+    ERROR_RESULT_FRAGMENT,
+} from './shared-definitions';
 
 export const PROMOTION_FRAGMENT = gql`
     fragment Promotion on Promotion {
@@ -60,9 +64,11 @@ export const CREATE_PROMOTION = gql`
     mutation CreatePromotion($input: CreatePromotionInput!) {
         createPromotion(input: $input) {
             ...Promotion
+            ...ErrorResult
         }
     }
     ${PROMOTION_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
 
 export const UPDATE_PROMOTION = gql`

packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts

@@ -1,6 +1,6 @@
-import gql from 'graphql-tag';
+import { gql } from 'apollo-angular';
 
-import { CONFIGURABLE_OPERATION_DEF_FRAGMENT } from './shared-definitions';
+import { CONFIGURABLE_OPERATION_DEF_FRAGMENT, ERROR_RESULT_FRAGMENT } from './shared-definitions';
 
 export const COUNTRY_FRAGMENT = gql`
     fragment Country on Country {
@@ -342,18 +342,22 @@ export const CREATE_CHANNEL = gql`
     mutation CreateChannel($input: CreateChannelInput!) {
         createChannel(input: $input) {
             ...Channel
+            ...ErrorResult
         }
     }
     ${CHANNEL_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
 
 export const UPDATE_CHANNEL = gql`
     mutation UpdateChannel($input: UpdateChannelInput!) {
         updateChannel(input: $input) {
             ...Channel
+            ...ErrorResult
         }
     }
     ${CHANNEL_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
 
 export const DELETE_CHANNEL = gql`
@@ -433,9 +437,11 @@ export const UPDATE_GLOBAL_SETTINGS = gql`
     mutation UpdateGlobalSettings($input: UpdateGlobalSettingsInput!) {
         updateGlobalSettings(input: $input) {
             ...GlobalSettings
+            ...ErrorResult
         }
     }
     ${GLOBAL_SETTINGS_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
 
 export const CUSTOM_FIELD_CONFIG_FRAGMENT = gql`

packages/admin-ui/src/lib/core/src/data/definitions/shared-definitions.ts

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag';
+import { gql } from 'apollo-angular';
 
 export const CONFIGURABLE_OPERATION_FRAGMENT = gql`
     fragment ConfigurableOperation on ConfigurableOperation {
@@ -23,3 +23,10 @@ export const CONFIGURABLE_OPERATION_DEF_FRAGMENT = gql`
         description
     }
 `;
+
+export const ERROR_RESULT_FRAGMENT = gql`
+    fragment ErrorResult on ErrorResult {
+        errorCode
+        message
+    }
+`;

packages/admin-ui/src/lib/core/src/data/definitions/shipping-definitions.ts

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag';
+import { gql } from 'apollo-angular';
 
 import { CONFIGURABLE_OPERATION_DEF_FRAGMENT, CONFIGURABLE_OPERATION_FRAGMENT } from './shared-definitions';
 
@@ -86,6 +86,7 @@ export const TEST_SHIPPING_METHOD = gql`
             quote {
                 price
                 priceWithTax
+                description
                 metadata
             }
         }

packages/admin-ui/src/lib/core/src/data/omit-typename-link.ts

@@ -1,5 +1,5 @@
+import { ApolloLink } from '@apollo/client/core';
 import { omit } from '@vendure/common/lib/omit';
-import { ApolloLink } from 'apollo-link';
 
 /**
  * The "__typename" property added by Apollo Client causes errors when posting the entity

packages/admin-ui/src/lib/core/src/data/providers/base-data.service.ts

@@ -1,9 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { DataProxy, MutationUpdaterFn, WatchQueryFetchPolicy } from '@apollo/client/core';
 import { Apollo } from 'apollo-angular';
-import { DataProxy } from 'apollo-cache';
-import { WatchQueryFetchPolicy } from 'apollo-client';
-import { ExecutionResult } from 'apollo-link';
 import { DocumentNode } from 'graphql/language/ast';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -18,15 +16,6 @@ import {
     removeReadonlyCustomFields,
 } from '../utils/remove-readonly-custom-fields';
 
-/**
- * Make the MutationUpdaterFn type-safe until this issue is resolved: https://github.com/apollographql/apollo-link/issues/616
- */
-export type TypedFetchResult<T = Record<string, any>> = ExecutionResult & {
-    context?: T;
-    data: T;
-};
-export type TypedMutationUpdateFn<T> = (proxy: DataProxy, mutationResult: TypedFetchResult<T>) => void;
-
 @Injectable()
 export class BaseDataService {
     constructor(
@@ -64,7 +53,7 @@ export class BaseDataService {
     mutate<T, V = Record<string, any>>(
         mutation: DocumentNode,
         variables?: V,
-        update?: TypedMutationUpdateFn<T>,
+        update?: MutationUpdaterFn<T>,
     ): Observable<T> {
         const withCustomFields = addCustomFields(mutation, this.customFields);
         const withoutReadonlyFields = this.removeReadonlyCustomFieldsFromVariables(mutation, variables);
@@ -73,7 +62,7 @@ export class BaseDataService {
             .mutate<T, V>({
                 mutation: withCustomFields,
                 variables: withoutReadonlyFields,
-                update: update as any,
+                update,
             })
             .pipe(map(result => result.data as T));
     }

packages/admin-ui/src/lib/core/src/data/providers/data.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { WatchQueryFetchPolicy } from 'apollo-client';
+import { MutationUpdaterFn, WatchQueryFetchPolicy } from '@apollo/client/core';
 import { DocumentNode } from 'graphql';
 import { Observable } from 'rxjs';
 
@@ -7,7 +7,7 @@ import { QueryResult } from '../query-result';
 
 import { AdministratorDataService } from './administrator-data.service';
 import { AuthDataService } from './auth-data.service';
-import { BaseDataService, TypedMutationUpdateFn } from './base-data.service';
+import { BaseDataService } from './base-data.service';
 import { ClientDataService } from './client-data.service';
 import { CollectionDataService } from './collection-data.service';
 import { CustomerDataService } from './customer-data.service';
@@ -63,7 +63,7 @@ export class DataService {
     mutate<T, V = Record<string, any>>(
         mutation: DocumentNode,
         variables?: V,
-        update?: TypedMutationUpdateFn<T>,
+        update?: MutationUpdaterFn<T>,
     ): Observable<T> {
         return this.baseDataService.mutate(mutation, variables, update);
     }

packages/admin-ui/src/lib/core/src/data/providers/order-data.service.ts

@@ -15,6 +15,7 @@ import {
     SettlePayment,
     SettleRefund,
     SettleRefundInput,
+    TransitionFulfillmentToState,
     TransitionOrderToState,
     UpdateOrderCustomFields,
     UpdateOrderInput,
@@ -32,6 +33,7 @@ import {
     REFUND_ORDER,
     SETTLE_PAYMENT,
     SETTLE_REFUND,
+    TRANSITION_FULFILLMENT_TO_STATE,
     TRANSITION_ORDER_TO_STATE,
     UPDATE_ORDER_CUSTOM_FIELDS,
     UPDATE_ORDER_NOTE,
@@ -71,7 +73,7 @@ export class OrderDataService {
         });
     }
 
-    createFullfillment(input: FulfillOrderInput) {
+    createFulfillment(input: FulfillOrderInput) {
         return this.baseDataService.mutate<CreateFulfillment.Mutation, CreateFulfillment.Variables>(
             CREATE_FULFILLMENT,
             {
@@ -80,6 +82,16 @@ export class OrderDataService {
         );
     }
 
+    transitionFulfillmentToState(id: string, state: string) {
+        return this.baseDataService.mutate<
+            TransitionFulfillmentToState.Mutation,
+            TransitionFulfillmentToState.Variables
+        >(TRANSITION_FULFILLMENT_TO_STATE, {
+            id,
+            state,
+        });
+    }
+
     cancelOrder(input: CancelOrderInput) {
         return this.baseDataService.mutate<CancelOrder.Mutation, CancelOrder.Variables>(CANCEL_ORDER, {
             input,

packages/admin-ui/src/lib/core/src/data/providers/settings-data.service.ts

@@ -1,5 +1,5 @@
+import { FetchPolicy } from '@apollo/client/core';
 import { pick } from '@vendure/common/lib/pick';
-import { FetchPolicy } from 'apollo-client';
 
 import {
     AddMembersToZone,
@@ -74,10 +74,10 @@ import {
     GET_COUNTRY,
     GET_COUNTRY_LIST,
     GET_GLOBAL_SETTINGS,
-    GET_JOBS_BY_ID,
-    GET_JOBS_LIST,
     GET_JOB_INFO,
     GET_JOB_QUEUE_LIST,
+    GET_JOBS_BY_ID,
+    GET_JOBS_LIST,
     GET_PAYMENT_METHOD,
     GET_PAYMENT_METHOD_LIST,
     GET_TAX_CATEGORIES,

packages/admin-ui/src/lib/core/src/data/query-result.ts

@@ -1,6 +1,6 @@
+import { ApolloQueryResult, NetworkStatus } from '@apollo/client/core';
 import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 import { Apollo, QueryRef } from 'apollo-angular';
-import { ApolloQueryResult, NetworkStatus } from 'apollo-client';
 import { merge, Observable, Subject } from 'rxjs';
 import { distinctUntilChanged, filter, finalize, map, skip, take, takeUntil, tap } from 'rxjs/operators';
 

packages/admin-ui/src/lib/core/src/data/server-config.ts

@@ -1,5 +1,5 @@
 import { Injectable, Injector } from '@angular/core';
-import gql from 'graphql-tag';
+import { gql } from 'apollo-angular';
 
 import {
     CustomFieldConfig,

packages/admin-ui/src/lib/core/src/providers/auth/auth.service.ts

@@ -1,9 +1,14 @@
 import { Injectable } from '@angular/core';
 import { DEFAULT_CHANNEL_CODE } from '@vendure/common/lib/shared-constants';
 import { Observable, of } from 'rxjs';
-import { catchError, mapTo, mergeMap, switchMap } from 'rxjs/operators';
+import { catchError, map, mapTo, mergeMap, switchMap } from 'rxjs/operators';
 
-import { CurrentUserChannel, CurrentUserFragment, SetAsLoggedIn } from '../../common/generated-types';
+import {
+    AttemptLogin,
+    CurrentUserChannel,
+    CurrentUserFragment,
+    SetAsLoggedIn,
+} from '../../common/generated-types';
 import { DataService } from '../../data/providers/data.service';
 import { ServerConfigService } from '../../data/server-config';
 import { LocalStorageService } from '../local-storage/local-storage.service';
@@ -25,15 +30,22 @@ export class AuthService {
      * Attempts to log in via the REST login endpoint and updates the app
      * state on success.
      */
-    logIn(username: string, password: string, rememberMe: boolean): Observable<SetAsLoggedIn.Mutation> {
+    logIn(username: string, password: string, rememberMe: boolean): Observable<AttemptLogin.Login> {
         return this.dataService.auth.attemptLogin(username, password, rememberMe).pipe(
             switchMap(response => {
-                this.setChannelToken(response.login.user.channels);
-                return this.serverConfigService.getServerConfig().then(() => response.login.user);
+                if (response.login.__typename === 'CurrentUser') {
+                    this.setChannelToken(response.login.channels);
+                }
+                return this.serverConfigService.getServerConfig().then(() => response.login);
             }),
-            switchMap(user => {
-                const { id } = this.getActiveChannel(user.channels);
-                return this.dataService.client.loginSuccess(username, id, user.channels);
+            switchMap(login => {
+                if (login.__typename === 'CurrentUser') {
+                    const { id } = this.getActiveChannel(login.channels);
+                    return this.dataService.client
+                        .loginSuccess(username, id, login.channels)
+                        .pipe(map(() => login));
+                }
+                return of(login);
             }),
         );
     }

packages/admin-ui/src/lib/core/src/shared/components/order-state-label/order-state-label.component.html

@@ -1,6 +1,6 @@
 <vdr-chip [ngClass]="state" [colorType]="chipColorType">
-    <clr-icon shape="success-standard" *ngIf="state === 'Fulfilled'" size="12"></clr-icon>
-    <clr-icon shape="success-standard" *ngIf="state === 'PartiallyFulfilled'" size="12"></clr-icon>
+    <clr-icon shape="success-standard" *ngIf="state === 'Delivered'" size="12"></clr-icon>
+    <clr-icon shape="success-standard" *ngIf="state === 'PartiallyDelivered'" size="12"></clr-icon>
     <clr-icon shape="ban" *ngIf="state === 'Cancelled'" size="12"></clr-icon>
     {{ state | orderStateI18nToken | translate }}
     <ng-content></ng-content>

packages/admin-ui/src/lib/core/src/shared/components/order-state-label/order-state-label.component.ts

@@ -13,9 +13,11 @@ export class OrderStateLabelComponent {
         switch (this.state) {
             case 'PaymentAuthorized':
             case 'PaymentSettled':
-            case 'PartiallyFulfilled':
+            case 'PartiallyDelivered':
+            case 'PartiallyShipped':
+            case 'Shipped':
                 return 'warning';
-            case 'Fulfilled':
+            case 'Delivered':
                 return 'success';
             case 'Cancelled':
                 return 'error';

packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/prosemirror/menu/images.ts

@@ -17,7 +17,6 @@ export function insertImageItem(nodeType: NodeType, modalService: ModalService)
         label: 'Image',
         class: '',
         css: '',
-        execEvent: 'mousedown',
         enable(state: EditorState) {
             return canInsert(state, nodeType);
         },

packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/prosemirror/menu/links.ts

@@ -30,7 +30,6 @@ export function linkItem(linkMark: MarkType, modalService: ModalService) {
         icon: icons.link,
         class: '',
         css: '',
-        execEvent: 'mousedown',
         active(state) {
             return markActive(state, linkMark);
         },

packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/prosemirror/menu/menu.ts

@@ -182,7 +182,6 @@ export function buildMenuItems(schema: Schema, modalService: ModalService) {
             label: 'Horizontal rule',
             class: '',
             css: '',
-            execEvent: 'mousedown',
             enable(state) {
                 return canInsert(state, hr);
             },

packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.html

@@ -1,8 +1,14 @@
-<div [ngClass]="displayType" [class.has-custom-icon]="!!iconShape" class="entry" [class.last]="isLast === true">
-    <div class="timeline">
+<div
+    [ngClass]="displayType"
+    [class.has-custom-icon]="!!iconShape"
+    class="entry"
+    [class.last]="isLast === true"
+    [class.collapsed]="collapsed"
+>
+    <div class="timeline" (click)="expandClick.emit()" [title]="timelineTitle | translate">
         <div class="custom-icon">
             <clr-icon
-                *ngIf="iconShape"
+                *ngIf="iconShape && !collapsed"
                 [attr.shape]="getIconShape()"
                 [ngClass]="getIconClass()"
                 size="24"

packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.scss

@@ -1,18 +1,32 @@
 @import "variables";
 
+:host {
+    display: block;
+
+    &:first-of-type {
+        .timeline {
+            &:before {
+                border-left-color: $color-grey-100;
+            }
+        }
+        .entry-body {
+            max-height: initial;
+        }
+    }
+}
 .entry {
     display: flex;
 }
 .timeline {
     border-left: 2px solid $color-primary-100;
-    padding-bottom: 24px;
+    padding-bottom: 8px;
     position: relative;
 
     &:before {
         content: '';
         position: absolute;
         width: 2px;
-        height: 10px;
+        height: 32px;
         left: -2px;
         border-left: 2px solid $color-primary-100;
     }
@@ -26,7 +40,9 @@
         border: 1px solid $color-grey-400;
         position: absolute;
         left: -5px;
-        top: 4px;
+        top: 32px;
+        transition: top 0.2s;
+        cursor: pointer;
     }
 
     .custom-icon {
@@ -34,7 +50,7 @@
         width: 32px;
         height: 32px;
         left: -17px;
-        top: -4px;
+        top: 32px;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
@@ -60,11 +76,14 @@
 
 .entry-body {
     flex: 1;
-    padding-bottom: 24px;
+    padding-top: 24px;
     padding-left: 12px;
     line-height: 16px;
     margin-left: 12px;
     color: $color-grey-500;
+    overflow: visible;
+    max-height: 100px;
+    transition: max-height 0.2s, padding-top 0.2s, opacity 0.2s 0.2s;
 }
 
 .featured-entry ::ng-deep {
@@ -126,3 +145,18 @@
         border: 1px solid $color-warning-400;
     }
 }
+
+.collapsed {
+    .entry-body {
+        max-height: 0;
+        overflow: hidden;
+        opacity: 0;
+        padding-top: 0;
+    }
+    .timeline {
+        border-left-color: transparent;
+    }
+    .timeline:after {
+        top: 0;
+    }
+}

packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.ts

@@ -1,4 +1,13 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    HostBinding,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 export type TimelineDisplayType = 'success' | 'error' | 'warning' | 'default' | 'muted';
 
@@ -15,6 +24,14 @@ export class TimelineEntryComponent {
     @Input() featured: boolean;
     @Input() iconShape?: string | [string, string];
     @Input() isLast?: boolean;
+    @HostBinding('class.collapsed')
+    @Input()
+    collapsed = false;
+    @Output() expandClick = new EventEmitter();
+
+    get timelineTitle(): string {
+        return this.collapsed ? _('common.expand-entries') : _('common.collapse-entries');
+    }
 
     getIconShape() {
         if (this.iconShape) {

packages/admin-ui/src/lib/core/src/shared/directives/if-directive-base.ts

@@ -1,12 +1,13 @@
-import { EmbeddedViewRef, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
-import { BehaviorSubject, combineLatest, Observable, Subject, Subscription } from 'rxjs';
-import { switchMap, take } from 'rxjs/operators';
-
-import { Permission } from '../../common/generated-types';
+import { Directive, EmbeddedViewRef, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 
 /**
  * A base class for implementing custom *ngIf-style structural directives based on custom conditions.
+ *
+ * @dynamic
  */
+@Directive()
 export class IfDirectiveBase<Args extends any[]> implements OnInit, OnDestroy {
     protected updateArgs$ = new BehaviorSubject<Args>([] as any);
     private readonly _thenTemplateRef: TemplateRef<any> | null = null;

packages/admin-ui/src/lib/core/src/shared/pipes/order-state-i18n-token.pipe.ts

@@ -10,8 +10,10 @@ export class OrderStateI18nTokenPipe implements PipeTransform {
         ArrangingPayment: _('order.state-arranging-payment'),
         PaymentAuthorized: _('order.state-payment-authorized'),
         PaymentSettled: _('order.state-payment-settled'),
-        PartiallyFulfilled: _('order.state-partially-fulfilled'),
-        Fulfilled: _('order.state-fulfilled'),
+        PartiallyShipped: _('order.state-partially-shipped'),
+        Shipped: _('order.state-shipped'),
+        PartiallyDelivered: _('order.state-partially-delivered'),
+        Delivered: _('order.state-delivered'),
         Cancelled: _('order.state-cancelled'),
     };
     transform<T extends unknown>(value: T): T {

packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.ts

@@ -5,6 +5,8 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
     BaseDetailComponent,
     CreateAddressInput,
+    CreateCustomerAddress,
+    CreateCustomerAddressMutation,
     CreateCustomerInput,
     Customer,
     CustomFieldConfig,
@@ -19,7 +21,11 @@ import {
     NotificationService,
     ServerConfigService,
     SortOrder,
+    UpdateCustomer,
+    UpdateCustomerAddress,
+    UpdateCustomerAddressMutation,
     UpdateCustomerInput,
+    UpdateCustomerMutation,
 } from '@vendure/admin-ui/core';
 import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 import { EMPTY, forkJoin, from, Observable, Subject } from 'rxjs';
@@ -190,30 +196,31 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
             phoneNumber: formValue.phoneNumber,
             customFields,
         };
-        this.dataService.customer.createCustomer(customer, formValue.password).subscribe(
-            data => {
-                this.notificationService.success(_('common.notify-create-success'), {
-                    entity: 'Customer',
-                });
-                if (data.createCustomer.emailAddress && !formValue.password) {
-                    this.notificationService.notify({
-                        message: _('customer.email-verification-sent'),
-                        translationVars: { emailAddress: formValue.emailAddress },
-                        type: 'info',
-                        duration: 10000,
-                    });
+        this.dataService.customer
+            .createCustomer(customer, formValue.password)
+            .subscribe(({ createCustomer }) => {
+                switch (createCustomer.__typename) {
+                    case 'Customer':
+                        this.notificationService.success(_('common.notify-create-success'), {
+                            entity: 'Customer',
+                        });
+                        if (createCustomer.emailAddress && !formValue.password) {
+                            this.notificationService.notify({
+                                message: _('customer.email-verification-sent'),
+                                translationVars: { emailAddress: formValue.emailAddress },
+                                type: 'info',
+                                duration: 10000,
+                            });
+                        }
+                        this.detailForm.markAsPristine();
+                        this.addressDefaultsUpdated = false;
+                        this.changeDetector.markForCheck();
+                        this.router.navigate(['../', createCustomer.id], { relativeTo: this.route });
+                        break;
+                    case 'EmailAddressConflictError':
+                        this.notificationService.error(createCustomer.message);
                 }
-                this.detailForm.markAsPristine();
-                this.addressDefaultsUpdated = false;
-                this.changeDetector.markForCheck();
-                this.router.navigate(['../', data.createCustomer.id], { relativeTo: this.route });
-            },
-            err => {
-                this.notificationService.error(_('common.notify-create-error'), {
-                    entity: 'Customer',
-                });
-            },
-        );
+            });
     }
 
     save() {
@@ -221,7 +228,11 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
             .pipe(
                 take(1),
                 mergeMap(({ id }) => {
-                    const saveOperations: Array<Observable<any>> = [];
+                    const saveOperations: Array<Observable<
+                        | UpdateCustomer.UpdateCustomer
+                        | CreateCustomerAddress.CreateCustomerAddress
+                        | UpdateCustomerAddress.UpdateCustomerAddress
+                    >> = [];
                     const customerForm = this.detailForm.get('customer');
                     if (customerForm && customerForm.dirty) {
                         const formValue = customerForm.value;
@@ -235,7 +246,11 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
                             phoneNumber: formValue.phoneNumber,
                             customFields,
                         };
-                        saveOperations.push(this.dataService.customer.updateCustomer(customer));
+                        saveOperations.push(
+                            this.dataService.customer
+                                .updateCustomer(customer)
+                                .pipe(map(res => res.updateCustomer)),
+                        );
                     }
                     const addressFormArray = this.detailForm.get('addresses') as FormArray;
                     if ((addressFormArray && addressFormArray.dirty) || this.addressDefaultsUpdated) {
@@ -258,14 +273,18 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
                                 };
                                 if (!address.id) {
                                     saveOperations.push(
-                                        this.dataService.customer.createCustomerAddress(id, input),
+                                        this.dataService.customer
+                                            .createCustomerAddress(id, input)
+                                            .pipe(map(res => res.createCustomerAddress)),
                                     );
                                 } else {
                                     saveOperations.push(
-                                        this.dataService.customer.updateCustomerAddress({
-                                            ...input,
-                                            id: address.id,
-                                        }),
+                                        this.dataService.customer
+                                            .updateCustomerAddress({
+                                                ...input,
+                                                id: address.id,
+                                            })
+                                            .pipe(map(res => res.updateCustomerAddress)),
                                     );
                                 }
                             }
@@ -276,13 +295,23 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
             )
             .subscribe(
                 data => {
-                    this.notificationService.success(_('common.notify-update-success'), {
-                        entity: 'Customer',
-                    });
-                    this.detailForm.markAsPristine();
-                    this.addressDefaultsUpdated = false;
-                    this.changeDetector.markForCheck();
-                    this.fetchHistory.next();
+                    for (const result of data) {
+                        switch (result.__typename) {
+                            case 'Customer':
+                            case 'Address':
+                                this.notificationService.success(_('common.notify-update-success'), {
+                                    entity: 'Customer',
+                                });
+                                this.detailForm.markAsPristine();
+                                this.addressDefaultsUpdated = false;
+                                this.changeDetector.markForCheck();
+                                this.fetchHistory.next();
+                                break;
+                            case 'EmailAddressConflictError':
+                                this.notificationService.error(result.message);
+                                break;
+                        }
+                    }
                 },
                 err => {
                     this.notificationService.error(_('common.notify-update-error'), {

packages/admin-ui/src/lib/login/src/components/login/login.component.html

@@ -36,6 +36,13 @@
             >
                 {{ 'common.login' | translate }}
             </button>
+            <clr-alert [clrAlertType]="'danger'" *ngIf="errorMessage">
+                <clr-alert-item>
+                    <span class="alert-text">
+                        {{ errorMessage }}
+                    </span>
+                </clr-alert-item>
+            </clr-alert>
         </div>
         <div class="version">vendure {{ version }}</div>
     </form>

packages/admin-ui/src/lib/login/src/components/login/login.component.ts

@@ -12,23 +12,28 @@ export class LoginComponent {
     password = '';
     rememberMe = false;
     version = ADMIN_UI_VERSION;
+    errorMessage: string | undefined;
 
     constructor(private authService: AuthService, private router: Router) {}
 
     logIn(): void {
-        this.authService.logIn(this.username, this.password, this.rememberMe).subscribe(
-            () => {
-                const redirect = this.getRedirectRoute();
-                this.router.navigateByUrl(redirect ? redirect : '/');
-            },
-            err => {
-                /* error handled by http interceptor */
-            },
-        );
+        this.errorMessage = undefined;
+        this.authService.logIn(this.username, this.password, this.rememberMe).subscribe(result => {
+            switch (result.__typename) {
+                case 'CurrentUser':
+                    const redirect = this.getRedirectRoute();
+                    this.router.navigateByUrl(redirect ? redirect : '/');
+                    break;
+                case 'InvalidCredentialsError':
+                case 'NativeAuthStrategyError':
+                    this.errorMessage = result.message;
+                    break;
+            }
+        });
     }
 
     /**
-     * Attemps to read a redirect param from the current url and parse it into a
+     * Attempts to read a redirect param from the current url and parse it into a
      * route from which the user was redirected after a 401 error.
      */
     private getRedirectRoute(): string | undefined {

packages/admin-ui/src/lib/marketing/src/components/promotion-detail/promotion-detail.component.ts

@@ -138,11 +138,20 @@ export class PromotionDetailComponent extends BaseDetailComponent<Promotion.Frag
             actions: this.mapOperationsToInputs(this.actions, formValue.actions),
         };
         this.dataService.promotion.createPromotion(input).subscribe(
-            data => {
-                this.notificationService.success(_('common.notify-create-success'), { entity: 'Promotion' });
-                this.detailForm.markAsPristine();
-                this.changeDetector.markForCheck();
-                this.router.navigate(['../', data.createPromotion.id], { relativeTo: this.route });
+            ({ createPromotion }) => {
+                switch (createPromotion.__typename) {
+                    case 'Promotion':
+                        this.notificationService.success(_('common.notify-create-success'), {
+                            entity: 'Promotion',
+                        });
+                        this.detailForm.markAsPristine();
+                        this.changeDetector.markForCheck();
+                        this.router.navigate(['../', createPromotion.id], { relativeTo: this.route });
+                        break;
+                    case 'MissingConditionsError':
+                        this.notificationService.error(createPromotion.message);
+                        break;
+                }
             },
             err => {
                 this.notificationService.error(_('common.notify-create-error'), {

packages/admin-ui/src/lib/order/src/components/fulfillment-card/fulfillment-card.component.html

@@ -0,0 +1,46 @@
+<div class="card">
+    <div class="card-header fulfillment-header">
+        <div>{{ 'order.fulfillment' | translate }}</div>
+        <div class="fulfillment-state">
+            <vdr-fulfillment-state-label [state]="fulfillment?.state"></vdr-fulfillment-state-label>
+        </div>
+    </div>
+    <div class="card-block">
+        <vdr-fulfillment-detail
+            *ngIf="!!fulfillment"
+            [fulfillmentId]="fulfillment?.id"
+            [order]="order"
+        ></vdr-fulfillment-detail>
+    </div>
+    <div class="card-footer">
+        <ng-container *ngIf="nextSuggestedState() as suggestedState">
+            <button class="btn btn-sm btn-primary" (click)="transitionState.emit(suggestedState)">
+                {{ 'order.set-fulfillment-state' | translate: { state: suggestedState } }}
+            </button>
+        </ng-container>
+        <vdr-dropdown>
+            <button class="icon-button" vdrDropdownTrigger>
+                <clr-icon shape="ellipsis-vertical"></clr-icon>
+            </button>
+            <vdr-dropdown-menu vdrPosition="bottom-right">
+                <ng-container *ngFor="let nextState of nextOtherStates()">
+                    <button
+                        type="button"
+                        class="btn"
+                        vdrDropdownItem
+                        (click)="transitionState.emit(nextState)"
+                    >
+                        <ng-container *ngIf="nextState !== 'Cancelled'; else cancel">
+                            <clr-icon shape="step-forward-2"></clr-icon>
+                            {{ 'order.transition-to-state' | translate: { state: nextState } }}
+                        </ng-container>
+                        <ng-template #cancel>
+                            <clr-icon shape="error-standard" class="is-error"></clr-icon>
+                            {{ 'order.cancel-fulfillment' | translate }}
+                        </ng-template>
+                    </button>
+                </ng-container>
+            </vdr-dropdown-menu>
+        </vdr-dropdown>
+    </div>
+</div>

packages/admin-ui/src/lib/order/src/components/fulfillment-card/fulfillment-card.component.scss

@@ -0,0 +1,12 @@
+
+.fulfillment-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.card-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}

packages/admin-ui/src/lib/order/src/components/fulfillment-card/fulfillment-card.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { Fulfillment, OrderDetail } from '@vendure/admin-ui/core';
+
+@Component({
+    selector: 'vdr-fulfillment-card',
+    templateUrl: './fulfillment-card.component.html',
+    styleUrls: ['./fulfillment-card.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FulfillmentCardComponent {
+    @Input() fulfillment: Fulfillment.Fragment | undefined;
+    @Input() order: OrderDetail.Fragment;
+    @Output() transitionState = new EventEmitter<string>();
+
+    nextSuggestedState(): string | undefined {
+        if (!this.fulfillment) {
+            return;
+        }
+        const { nextStates } = this.fulfillment;
+        const namedStateOrDefault = (targetState: string) =>
+            nextStates.includes(targetState) ? targetState : nextStates[0];
+        switch (this.fulfillment?.state) {
+            case 'Pending':
+                return namedStateOrDefault('Shipped');
+            case 'Shipped':
+                return namedStateOrDefault('Delivered');
+            default:
+                return nextStates.find(s => s !== 'Cancelled');
+        }
+    }
+
+    nextOtherStates(): string[] {
+        if (!this.fulfillment) {
+            return [];
+        }
+        const suggested = this.nextSuggestedState();
+        return this.fulfillment.nextStates.filter(s => s !== suggested);
+    }
+}

packages/admin-ui/src/lib/order/src/components/fulfillment-detail/fulfillment-detail.component.ts

@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
 import { OrderDetail } from '@vendure/admin-ui/core';
 
 @Component({

packages/admin-ui/src/lib/order/src/components/fulfillment-state-label/fulfillment-state-label.component.html

@@ -0,0 +1,4 @@
+<vdr-chip [title]="'order.payment-state' | translate" [colorType]="chipColorType">
+    <clr-icon shape="check-circle" *ngIf="state === 'Delivered'"></clr-icon>
+    {{ state }}
+</vdr-chip>

packages/admin-ui/src/lib/order/src/components/fulfillment-state-label/fulfillment-state-label.component.scss

@@ -0,0 +1,3 @@
+:host {
+    font-size: 14px;
+}

packages/admin-ui/src/lib/order/src/components/fulfillment-state-label/fulfillment-state-label.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'vdr-fulfillment-state-label',
+    templateUrl: './fulfillment-state-label.component.html',
+    styleUrls: ['./fulfillment-state-label.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FulfillmentStateLabelComponent {
+    @Input() state: string;
+
+    get chipColorType() {
+        switch (this.state) {
+            case 'Pending':
+            case 'Shipped':
+                return 'warning';
+            case 'Delivered':
+                return 'success';
+            case 'Cancelled':
+                return 'error';
+        }
+    }
+}

packages/admin-ui/src/lib/order/src/components/line-fulfillment/line-fulfillment.component.html

@@ -1,4 +1,4 @@
-<vdr-dropdown class="search-settings-menu" *ngIf="fulfilledCount || orderState === 'PartiallyFulfilled'">
+<vdr-dropdown class="search-settings-menu" *ngIf="fulfilledCount || orderState === 'PartiallyDelivered'">
     <button type="button" class="icon-button" vdrDropdownTrigger>
         <clr-icon *ngIf="fulfillmentStatus === 'full'" class="item-fulfilled" shape="check-circle"></clr-icon>
         <clr-icon

packages/admin-ui/src/lib/order/src/components/line-fulfillment/line-fulfillment.component.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { unique } from '@vendure/common/lib/unique';
-
 import { OrderDetail } from '@vendure/admin-ui/core';
+import { unique } from '@vendure/common/lib/unique';
 
 export type FulfillmentStatus = 'full' | 'partial' | 'none';
 
@@ -20,7 +19,7 @@ export class LineFulfillmentComponent implements OnChanges {
 
     ngOnChanges(changes: SimpleChanges): void {
         if (this.line) {
-            this.fulfilledCount = this.getFulfilledCount(this.line);
+            this.fulfilledCount = this.getDeliveredCount(this.line);
             this.fulfillmentStatus = this.getFulfillmentStatus(this.fulfilledCount, this.line.items.length);
             this.fulfillments = this.getFulfillments(this.line);
         }
@@ -29,7 +28,7 @@ export class LineFulfillmentComponent implements OnChanges {
     /**
      * Returns the number of items in an OrderLine which are fulfilled.
      */
-    private getFulfilledCount(line: OrderDetail.Lines): number {
+    private getDeliveredCount(line: OrderDetail.Lines): number {
         return line.items.reduce((sum, item) => sum + (item.fulfillment ? 1 : 0), 0);
     }
 
@@ -57,12 +56,9 @@ export class LineFulfillmentComponent implements OnChanges {
                 }
             }
         }
-        const all = line.items.reduce(
-            (fulfillments, item) => {
-                return item.fulfillment ? [...fulfillments, item.fulfillment] : fulfillments;
-            },
-            [] as OrderDetail.Fulfillments[],
-        );
+        const all = line.items.reduce((fulfillments, item) => {
+            return item.fulfillment ? [...fulfillments, item.fulfillment] : fulfillments;
+        }, [] as OrderDetail.Fulfillments[]);
 
         return Object.entries(counts).map(([id, count]) => {
             return {

packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.html

@@ -3,8 +3,12 @@
         <div class="flex clr-align-items-center">
             <vdr-entity-info [entity]="entity$ | async"></vdr-entity-info>
             <vdr-order-state-label [state]="order.state">
-                <button class="icon-button" (click)="openStateDiagram()" [title]="'order.order-state-diagram' | translate">
-                <clr-icon shape="list"></clr-icon>
+                <button
+                    class="icon-button"
+                    (click)="openStateDiagram()"
+                    [title]="'order.order-state-diagram' | translate"
+                >
+                    <clr-icon shape="list"></clr-icon>
                 </button>
             </vdr-order-state-label>
         </div>
@@ -15,7 +19,7 @@
         <button
             class="btn btn-primary"
             (click)="fulfillOrder()"
-            [disabled]="order.state !== 'PaymentSettled' && order.state !== 'PartiallyFulfilled'"
+            [disabled]="!canAddFulfillment(order)"
         >
             {{ 'order.fulfill-order' | translate }}
         </button>
@@ -258,28 +262,20 @@
                 </div>
             </div>
             <ng-container *ngIf="order.payments && order.payments.length">
-                <vdr-order-payment-detail
+                <vdr-order-payment-card
                     *ngFor="let payment of order.payments"
                     [currencyCode]="order.currencyCode"
                     [payment]="payment"
                     (settlePayment)="settlePayment($event)"
                     (settleRefund)="settleRefund($event)"
-                ></vdr-order-payment-detail>
+                ></vdr-order-payment-card>
             </ng-container>
-            <ng-container *ngIf="order.fulfillments && order.fulfillments.length">
-                <div class="card">
-                    <div class="card-header">
-                        {{ 'order.fulfillment' | translate }}
-                    </div>
-                    <div class="card-block">
-                        <div class="fulfillment-detail" *ngFor="let fulfillment of order.fulfillments">
-                            <vdr-fulfillment-detail
-                                [fulfillmentId]="fulfillment.id"
-                                [order]="order"
-                            ></vdr-fulfillment-detail>
-                        </div>
-                    </div>
-                </div>
+            <ng-container *ngFor="let fulfillment of order.fulfillments">
+                <vdr-fulfillment-card
+                    [fulfillment]="fulfillment"
+                    [order]="order"
+                    (transitionState)="transitionFulfillment(fulfillment.id, $event)"
+                ></vdr-fulfillment-card>
             </ng-container>
         </div>
     </div>

packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.scss

@@ -67,8 +67,3 @@
         color: $color-grey-500;
     }
 }
-
-.fulfillment-detail:not(:last-of-type) {
-    border-bottom: 1px dashed $color-grey-300;
-    margin-bottom: 12px;
-}

packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.ts

@@ -9,11 +9,13 @@ import {
     DataService,
     EditNoteDialogComponent,
     GetOrderHistory,
+    GetOrderQuery,
     HistoryEntry,
     ModalService,
     NotificationService,
     Order,
     OrderDetail,
+    OrderLineFragment,
     ServerConfigService,
     SortOrder,
 } from '@vendure/admin-ui/core';
@@ -47,8 +49,8 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
         'ArrangingPayment',
         'PaymentAuthorized',
         'PaymentSettled',
-        'PartiallyFulfilled',
-        'Fulfilled',
+        'PartiallyDelivered',
+        'Delivered',
         'Cancelled',
     ];
     constructor(
@@ -132,9 +134,15 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
     }
 
     transitionToState(state: string) {
-        this.dataService.order.transitionToState(this.id, state).subscribe(val => {
-            this.notificationService.success(_('order.transitioned-to-state-success'), { state });
-            this.fetchHistory.next();
+        this.dataService.order.transitionToState(this.id, state).subscribe(({ transitionOrderToState }) => {
+            switch (transitionOrderToState?.__typename) {
+                case 'Order':
+                    this.notificationService.success(_('order.transitioned-to-state-success'), { state });
+                    this.fetchHistory.next();
+                    break;
+                case 'OrderStateTransitionError':
+                    this.notificationService.error(transitionOrderToState.transitionError);
+            }
         });
     }
 
@@ -171,18 +179,34 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
 
     settlePayment(payment: OrderDetail.Payments) {
         this.dataService.order.settlePayment(payment.id).subscribe(({ settlePayment }) => {
-            if (settlePayment) {
-                if (settlePayment.state === 'Settled') {
-                    this.notificationService.success(_('order.settle-payment-success'));
-                } else {
-                    this.notificationService.error(_('order.settle-payment-error'));
-                }
-                this.dataService.order.getOrder(this.id).single$.subscribe();
-                this.fetchHistory.next();
+            switch (settlePayment.__typename) {
+                case 'Payment':
+                    if (settlePayment.state === 'Settled') {
+                        this.notificationService.success(_('order.settle-payment-success'));
+                    } else {
+                        this.notificationService.error(_('order.settle-payment-error'));
+                    }
+                    this.dataService.order.getOrder(this.id).single$.subscribe();
+                    this.fetchHistory.next();
+                    break;
+                case 'OrderStateTransitionError':
+                case 'PaymentStateTransitionError':
+                case 'SettlePaymentError':
+                    this.notificationService.error(settlePayment.message);
             }
         });
     }
 
+    canAddFulfillment(order: OrderDetail.Fragment): boolean {
+        const allItemsFulfilled = order.lines
+            .reduce((items, line) => [...items, ...line.items], [] as OrderLineFragment['items'])
+            .every(item => !!item.fulfillment);
+        return (
+            !allItemsFulfilled &&
+            (order.nextStates.includes('Shipped') || order.nextStates.includes('PartiallyShipped'))
+        );
+    }
+
     fulfillOrder() {
         this.entity$
             .pipe(
@@ -197,7 +221,7 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
                 }),
                 switchMap(input => {
                     if (input) {
-                        return this.dataService.order.createFullfillment(input);
+                        return this.dataService.order.createFulfillment(input);
                     } else {
                         return of(undefined);
                     }
@@ -211,6 +235,15 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
             });
     }
 
+    transitionFulfillment(id: string, state: string) {
+        this.dataService.order
+            .transitionFulfillmentToState(id, state)
+            .pipe(switchMap(result => this.refetchOrder(result)))
+            .subscribe(() => {
+                this.notificationService.success(_('order.successfully-updated-fulfillment'));
+            });
+    }
+
     cancelOrRefund(order: OrderDetail.Fragment) {
         const isRefundable = this.orderHasSettledPayments(order);
         if (order.state === 'PaymentAuthorized' || order.active === true || !isRefundable) {
@@ -358,15 +391,32 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
                 switchMap(input => {
                     if (input) {
                         return this.dataService.order.refundOrder(omit(input, ['cancel'])).pipe(
-                            switchMap(result => {
-                                if (input.cancel.length) {
-                                    return this.dataService.order.cancelOrder({
-                                        orderId: this.id,
-                                        lines: input.cancel,
-                                        reason: input.reason,
-                                    });
-                                } else {
-                                    return of(result);
+                            switchMap(({ refundOrder }) => {
+                                switch (refundOrder.__typename) {
+                                    case 'Refund':
+                                        if (input.cancel.length) {
+                                            return this.dataService.order
+                                                .cancelOrder({
+                                                    orderId: this.id,
+                                                    lines: input.cancel,
+                                                    reason: input.reason,
+                                                })
+                                                .pipe(map(({ cancelOrder }) => cancelOrder));
+                                        } else {
+                                            return of(refundOrder);
+                                        }
+                                    case 'AlreadyRefundedError':
+                                    case 'OrderStateTransitionError':
+                                    case 'MultipleOrderError':
+                                    case 'NothingToRefundError':
+                                    case 'PaymentOrderMismatchError':
+                                    case 'QuantityTooGreatError':
+                                    case 'RefundOrderStateError':
+                                    case 'RefundStateTransitionError':
+                                        this.notificationService.error(refundOrder.message);
+                                    // tslint:disable-next-line:no-switch-case-fall-through
+                                    default:
+                                        return of(undefined);
                                 }
                             }),
                         );
@@ -374,16 +424,27 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
                         return of(undefined);
                     }
                 }),
-                switchMap(result => this.refetchOrder(result)),
             )
             .subscribe(result => {
                 if (result) {
-                    this.notificationService.success(_('order.refund-order-success'));
+                    switch (result.__typename) {
+                        case 'Order':
+                        case 'Refund':
+                            this.refetchOrder(result).subscribe();
+                            this.notificationService.success(_('order.refund-order-success'));
+                            break;
+                        case 'QuantityTooGreatError':
+                        case 'MultipleOrderError':
+                        case 'OrderStateTransitionError':
+                        case 'CancelActiveOrderError':
+                        case 'EmptyOrderLineSelectionError':
+                            this.notificationService.error(result.message);
+                    }
                 }
             });
     }
 
-    private refetchOrder(result: object | undefined) {
+    private refetchOrder(result: object | undefined): Observable<GetOrderQuery | undefined> {
         this.fetchHistory.next();
         if (result) {
             return this.dataService.order.getOrder(this.id).single$;

packages/admin-ui/src/lib/order/src/components/order-history/order-history.component.html

@@ -1,6 +1,6 @@
 <h4>{{ 'order.order-history' | translate }}</h4>
-<div class="entry-list">
-    <vdr-timeline-entry iconShape="note" displayType="muted">
+<div class="entry-list" [class.expanded]="expanded">
+    <vdr-timeline-entry iconShape="note" displayType="muted" [featured]="true">
         <div class="note-entry">
             <textarea [(ngModel)]="note" name="note" class="note"></textarea>
             <button class="btn btn-secondary" [disabled]="!note" (click)="addNoteToOrder()">
@@ -27,16 +27,18 @@
         [createdAt]="entry.createdAt"
         [name]="getName(entry)"
         [featured]="isFeatured(entry)"
+        [collapsed]="!expanded && !isFeatured(entry)"
+        (expandClick)="expanded = !expanded"
     >
         <ng-container [ngSwitch]="entry.type">
             <ng-container *ngSwitchCase="type.ORDER_STATE_TRANSITION">
-                <div class="title" *ngIf="entry.data.to === 'Fulfilled'">
+                <div class="title" *ngIf="entry.data.to === 'Delivered'">
                     {{ 'order.history-order-fulfilled' | translate }}
                 </div>
                 <div class="title" *ngIf="entry.data.to === 'Cancelled'">
                     {{ 'order.history-order-cancelled' | translate }}
                 </div>
-                <ng-template [ngIf]="entry.data.to !== 'Cancelled' && entry.data.to !== 'Fulfilled'">
+                <ng-template [ngIf]="entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'">
                     {{
                         'order.history-order-transition'
                             | translate: { from: entry.data.from, to: entry.data.to }
@@ -60,7 +62,7 @@
                     {{
                         'order.history-payment-transition'
                             | translate
-                                : { from: entry.data.from, to: entry.data.to, id: entry.data.paymentId }
+                                : { from: entry.data.from, to: entry.data.to, id: getPayment(entry)?.transactionId }
                     }}
                 </ng-template>
             </ng-container>
@@ -81,12 +83,35 @@
                     </vdr-labeled-data>
                 </vdr-history-entry-detail>
             </ng-container>
-            <ng-container *ngSwitchCase="type.ORDER_FULLFILLMENT">
-                <div class="title">
-                    {{ 'order.history-fulfillment-created' | translate }}
-                </div>
-                {{ 'order.tracking-code' | translate }}: {{ getFullfillment(entry)?.trackingCode }}
-                <vdr-history-entry-detail *ngIf="getFullfillment(entry) as fulfillment">
+            <ng-container *ngSwitchCase="type.ORDER_FULFILLMENT">
+                {{ 'order.history-fulfillment-created' | translate }}
+                <vdr-history-entry-detail *ngIf="getFulfillment(entry) as fulfillment">
+                    <vdr-fulfillment-detail
+                        [fulfillmentId]="fulfillment.id"
+                        [order]="order"
+                    ></vdr-fulfillment-detail>
+                </vdr-history-entry-detail>
+            </ng-container>
+            <ng-container *ngSwitchCase="type.ORDER_FULFILLMENT_TRANSITION">
+                <ng-container *ngIf="entry.data.to === 'Delivered'">
+                    <div class="title">
+                        {{ 'order.history-fulfillment-delivered' | translate }}
+                    </div>
+                    {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}
+                </ng-container>
+                <ng-container *ngIf="entry.data.to === 'Shipped'">
+                    <div class="title">
+                        {{ 'order.history-fulfillment-shipped' | translate }}
+                    </div>
+                    {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}
+                </ng-container>
+                <ng-container *ngIf="entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'">
+                    {{
+                        'order.history-fulfillment-transition'
+                            | translate: { from: entry.data.from, to: entry.data.to }
+                    }}
+                </ng-container>
+                <vdr-history-entry-detail *ngIf="getFulfillment(entry) as fulfillment">
                     <vdr-fulfillment-detail
                         [fulfillmentId]="fulfillment.id"
                         [order]="order"
@@ -149,5 +174,9 @@
             </ng-container>
         </ng-container>
     </vdr-timeline-entry>
-    <vdr-timeline-entry [isLast]="true"></vdr-timeline-entry>
+    <vdr-timeline-entry [isLast]="true" [createdAt]="order.createdAt" [featured]="true">
+        <div class="title">
+            {{ 'order.history-order-created' | translate }}
+        </div>
+    </vdr-timeline-entry>
 </div>

packages/admin-ui/src/lib/order/src/components/order-history/order-history.component.ts

@@ -22,17 +22,23 @@ export class OrderHistoryComponent {
     @Output() deleteNote = new EventEmitter<HistoryEntry>();
     note = '';
     noteIsPrivate = true;
+    expanded = false;
     readonly type = HistoryEntryType;
 
     getDisplayType(entry: GetOrderHistory.Items): TimelineDisplayType {
         if (entry.type === HistoryEntryType.ORDER_STATE_TRANSITION) {
-            if (entry.data.to === 'Fulfilled') {
+            if (entry.data.to === 'Delivered') {
                 return 'success';
             }
             if (entry.data.to === 'Cancelled') {
                 return 'error';
             }
         }
+        if (entry.type === HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) {
+            if (entry.data.to === 'Delivered') {
+                return 'success';
+            }
+        }
         if (entry.type === HistoryEntryType.ORDER_PAYMENT_TRANSITION) {
             if (entry.data.to === 'Declined') {
                 return 'error';
@@ -49,7 +55,7 @@ export class OrderHistoryComponent {
 
     getTimelineIcon(entry: GetOrderHistory.Items) {
         if (entry.type === HistoryEntryType.ORDER_STATE_TRANSITION) {
-            if (entry.data.to === 'Fulfilled') {
+            if (entry.data.to === 'Delivered') {
                 return ['success-standard', 'is-solid'];
             }
             if (entry.data.to === 'Cancelled') {
@@ -62,8 +68,13 @@ export class OrderHistoryComponent {
         if (entry.type === HistoryEntryType.ORDER_NOTE) {
             return 'note';
         }
-        if (entry.type === HistoryEntryType.ORDER_FULLFILLMENT) {
-            return 'truck';
+        if (entry.type === HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) {
+            if (entry.data.to === 'Shipped') {
+                return 'truck';
+            }
+            if (entry.data.to === 'Delivered') {
+                return 'truck';
+            }
         }
     }
 
@@ -71,14 +82,15 @@ export class OrderHistoryComponent {
         switch (entry.type) {
             case HistoryEntryType.ORDER_STATE_TRANSITION: {
                 return (
-                    entry.data.to === 'Fulfilled' ||
+                    entry.data.to === 'Delivered' ||
                     entry.data.to === 'Cancelled' ||
                     entry.data.to === 'Settled'
                 );
             }
             case HistoryEntryType.ORDER_PAYMENT_TRANSITION:
                 return entry.data.to === 'Settled';
-            case HistoryEntryType.ORDER_FULLFILLMENT:
+            case HistoryEntryType.ORDER_FULFILLMENT_TRANSITION:
+                return entry.data.to === 'Delivered' || entry.data.to === 'Shipped';
             case HistoryEntryType.ORDER_NOTE:
                 return true;
             default:
@@ -86,15 +98,19 @@ export class OrderHistoryComponent {
         }
     }
 
-    getFullfillment(entry: GetOrderHistory.Items): OrderDetail.Fulfillments | undefined {
-        if (entry.type === HistoryEntryType.ORDER_FULLFILLMENT && this.order.fulfillments) {
-            return this.order.fulfillments.find((f) => f.id === entry.data.fulfillmentId);
+    getFulfillment(entry: GetOrderHistory.Items): OrderDetail.Fulfillments | undefined {
+        if (
+            (entry.type === HistoryEntryType.ORDER_FULFILLMENT ||
+                entry.type === HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) &&
+            this.order.fulfillments
+        ) {
+            return this.order.fulfillments.find(f => f.id === entry.data.fulfillmentId);
         }
     }
 
     getPayment(entry: GetOrderHistory.Items): OrderDetail.Payments | undefined {
         if (entry.type === HistoryEntryType.ORDER_PAYMENT_TRANSITION && this.order.payments) {
-            return this.order.payments.find((p) => p.id === entry.data.paymentId);
+            return this.order.payments.find(p => p.id === entry.data.paymentId);
         }
     }
 

packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.html

@@ -7,10 +7,10 @@
                 <option value="ArrangingPayment">{{ 'order.state-arranging-payment' | translate }}</option>
                 <option value="PaymentAuthorized">{{ 'order.state-payment-authorized' | translate }}</option>
                 <option value="PaymentSettled">{{ 'order.state-payment-settled' | translate }}</option>
-                <option value="PartiallyFulfilled">
-                    {{ 'order.state-partially-fulfilled' | translate }}
+                <option value="PartiallyDelivered">
+                    {{ 'order.state-partially-delivered' | translate }}
                 </option>
-                <option value="Fulfilled">{{ 'order.state-fulfilled' | translate }}</option>
+                <option value="Delivered">{{ 'order.state-delivered' | translate }}</option>
                 <option value="Cancelled">{{ 'order.state-cancelled' | translate }}</option>
             </select>
             <input

packages/admin-ui/src/lib/order/src/components/order-payment-card/order-payment-card.component.ts

@@ -1,10 +1,9 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { CurrencyCode } from '@vendure/admin-ui/core';
-
 import { OrderDetail } from '@vendure/admin-ui/core';
 
 @Component({
-    selector: 'vdr-order-payment-detail',
+    selector: 'vdr-order-payment-card',
     templateUrl: './order-payment-card.component.html',
     styleUrls: ['./order-payment-card.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,

packages/admin-ui/src/lib/order/src/order.module.ts

@@ -4,7 +4,9 @@ import { SharedModule } from '@vendure/admin-ui/core';
 
 import { CancelOrderDialogComponent } from './components/cancel-order-dialog/cancel-order-dialog.component';
 import { FulfillOrderDialogComponent } from './components/fulfill-order-dialog/fulfill-order-dialog.component';
+import { FulfillmentCardComponent } from './components/fulfillment-card/fulfillment-card.component';
 import { FulfillmentDetailComponent } from './components/fulfillment-detail/fulfillment-detail.component';
+import { FulfillmentStateLabelComponent } from './components/fulfillment-state-label/fulfillment-state-label.component';
 import { LineFulfillmentComponent } from './components/line-fulfillment/line-fulfillment.component';
 import { LineRefundsComponent } from './components/line-refunds/line-refunds.component';
 import { OrderCustomFieldsCardComponent } from './components/order-custom-fields-card/order-custom-fields-card.component';
@@ -47,6 +49,8 @@ import { orderRoutes } from './order.routes';
         OrderProcessNodeComponent,
         OrderProcessEdgeComponent,
         OrderProcessGraphDialogComponent,
+        FulfillmentStateLabelComponent,
+        FulfillmentCardComponent,
     ],
 })
 export class OrderModule {}

packages/admin-ui/src/lib/order/src/public_api.ts

@@ -1,7 +1,9 @@
 // This file was generated by the build-public-api.ts script
 export * from './components/cancel-order-dialog/cancel-order-dialog.component';
 export * from './components/fulfill-order-dialog/fulfill-order-dialog.component';
+export * from './components/fulfillment-card/fulfillment-card.component';
 export * from './components/fulfillment-detail/fulfillment-detail.component';
+export * from './components/fulfillment-state-label/fulfillment-state-label.component';
 export * from './components/line-fulfillment/line-fulfillment.component';
 export * from './components/line-refunds/line-refunds.component';
 export * from './components/order-custom-fields-card/order-custom-fields-card.component';

packages/admin-ui/src/lib/settings/src/components/channel-detail/channel-detail.component.ts

@@ -54,7 +54,7 @@ export class ChannelDetailComponent extends BaseDetailComponent<Channel.Fragment
 
     ngOnInit() {
         this.init();
-        this.zones$ = this.dataService.settings.getZones().mapSingle((data) => data.zones);
+        this.zones$ = this.dataService.settings.getZones().mapSingle(data => data.zones);
         this.availableLanguageCodes$ = this.serverConfigService.getAvailableLanguages();
     }
 
@@ -96,21 +96,21 @@ export class ChannelDetailComponent extends BaseDetailComponent<Channel.Fragment
                     this.dataService.client.updateUserChannels(me!.channels).pipe(map(() => createChannel)),
                 ),
             )
-            .subscribe(
-                (data) => {
-                    this.notificationService.success(_('common.notify-create-success'), {
-                        entity: 'Channel',
-                    });
-                    this.detailForm.markAsPristine();
-                    this.changeDetector.markForCheck();
-                    this.router.navigate(['../', data.id], { relativeTo: this.route });
-                },
-                (err) => {
-                    this.notificationService.error(_('common.notify-create-error'), {
-                        entity: 'Channel',
-                    });
-                },
-            );
+            .subscribe(data => {
+                switch (data.__typename) {
+                    case 'Channel':
+                        this.notificationService.success(_('common.notify-create-success'), {
+                            entity: 'Channel',
+                        });
+                        this.detailForm.markAsPristine();
+                        this.changeDetector.markForCheck();
+                        this.router.navigate(['../', data.id], { relativeTo: this.route });
+                        break;
+                    case 'LanguageNotAvailableError':
+                        this.notificationService.error(data.message);
+                        break;
+                }
+            });
     }
 
     save() {
@@ -121,7 +121,7 @@ export class ChannelDetailComponent extends BaseDetailComponent<Channel.Fragment
         this.entity$
             .pipe(
                 take(1),
-                mergeMap((channel) => {
+                mergeMap(channel => {
                     const input = {
                         id: channel.id,
                         code: formValue.code,
@@ -134,20 +134,19 @@ export class ChannelDetailComponent extends BaseDetailComponent<Channel.Fragment
                     return this.dataService.settings.updateChannel(input);
                 }),
             )
-            .subscribe(
-                () => {
-                    this.notificationService.success(_('common.notify-update-success'), {
-                        entity: 'Channel',
-                    });
-                    this.detailForm.markAsPristine();
-                    this.changeDetector.markForCheck();
-                },
-                (err) => {
-                    this.notificationService.error(_('common.notify-update-error'), {
-                        entity: 'Channel',
-                    });
-                },
-            );
+            .subscribe(({ updateChannel }) => {
+                switch (updateChannel.__typename) {
+                    case 'Channel':
+                        this.notificationService.success(_('common.notify-update-success'), {
+                            entity: 'Channel',
+                        });
+                        this.detailForm.markAsPristine();
+                        this.changeDetector.markForCheck();
+                        break;
+                    case 'LanguageNotAvailableError':
+                        this.notificationService.error(updateChannel.message);
+                }
+            });
     }
 
     /**

packages/admin-ui/src/lib/settings/src/components/global-settings/global-settings.component.ts

@@ -7,7 +7,7 @@ import { CustomFieldConfig, GlobalSettings, LanguageCode, Permission } from '@ve
 import { NotificationService } from '@vendure/admin-ui/core';
 import { DataService } from '@vendure/admin-ui/core';
 import { ServerConfigService } from '@vendure/admin-ui/core';
-import { switchMap } from 'rxjs/operators';
+import { switchMap, tap } from 'rxjs/operators';
 
 @Component({
     selector: 'vdr-global-settings',
@@ -63,21 +63,23 @@ export class GlobalSettingsComponent extends BaseDetailComponent<GlobalSettings>
 
         this.dataService.settings
             .updateGlobalSettings(this.detailForm.value)
-            .pipe(switchMap(() => this.serverConfigService.refreshGlobalSettings()))
-            .subscribe(
-                () => {
-                    this.detailForm.markAsPristine();
-                    this.changeDetector.markForCheck();
-                    this.notificationService.success(_('common.notify-update-success'), {
-                        entity: 'Settings',
-                    });
-                },
-                (err) => {
-                    this.notificationService.error(_('common.notify-update-error'), {
-                        entity: 'Settings',
-                    });
-                },
-            );
+            .pipe(
+                tap(({ updateGlobalSettings }) => {
+                    switch (updateGlobalSettings.__typename) {
+                        case 'GlobalSettings':
+                            this.detailForm.markAsPristine();
+                            this.changeDetector.markForCheck();
+                            this.notificationService.success(_('common.notify-update-success'), {
+                                entity: 'Settings',
+                            });
+                            break;
+                        case 'ChannelDefaultLanguageError':
+                            this.notificationService.error(updateGlobalSettings.message);
+                    }
+                }),
+                switchMap(() => this.serverConfigService.refreshGlobalSettings()),
+            )
+            .subscribe();
     }
 
     protected setFormValues(entity: GlobalSettings, languageCode: LanguageCode): void {

packages/admin-ui/src/lib/settings/src/components/shipping-method-detail/shipping-method-detail.component.html

@@ -51,7 +51,7 @@
                 (remove)="selectedChecker = null"
                 formControlName="checker"
             ></vdr-configurable-input>
-            <div *ngIf="!selectedChecker">
+            <div *ngIf="!selectedChecker || !selectedCheckerDefinition">
                 <vdr-dropdown>
                     <button class="btn btn-outline" vdrDropdownTrigger>
                         <clr-icon shape="plus"></clr-icon>
@@ -80,7 +80,7 @@
                 (remove)="selectedCalculator = null"
                 formControlName="calculator"
             ></vdr-configurable-input>
-            <div *ngIf="!selectedCalculator">
+            <div *ngIf="!selectedCalculator || !selectedCalculatorDefinition">
                 <vdr-dropdown>
                     <button class="btn btn-outline" vdrDropdownTrigger>
                         <clr-icon shape="plus"></clr-icon>

packages/admin-ui/src/lib/static/i18n-messages/de.json

@@ -144,6 +144,7 @@
     "channel": "Kanal",
     "channels": "Kanäle",
     "code": "Code",
+    "collapse-entries": "",
     "confirm": "",
     "confirm-delete-note": "",
     "confirm-navigation": "Navigation bestätigen",
@@ -158,11 +159,11 @@
     "disabled": "Deaktiviert",
     "discard-changes": "Änderungen verwerfen",
     "display-custom-fields": "Benutzerdefinierte Felder anzeigen",
-    "done": "Fertig",
     "edit": "Bearbeiten",
     "edit-field": "Feld bearbeiten",
     "edit-note": "",
     "enabled": "Aktiviert",
+    "expand-entries": "",
     "extension-running-in-separate-window": "Die Erweiterung läuft in einem separaten Fenster",
     "guest": "Gast",
     "hide-custom-fields": "Benutzerdefinierte Felder ausblenden",
@@ -522,6 +523,7 @@
     "amount": "Betrag",
     "billing-address": "",
     "cancel": "Abbrechen",
+    "cancel-fulfillment": "",
     "cancel-order": "Bestellung stornieren",
     "cancel-reason-customer-request": "Kundenanfrage",
     "cancel-reason-not-available": "Nicht verfügbar",
@@ -539,8 +541,12 @@
     "history-coupon-code-applied": "Gutscheincode aktiviert",
     "history-coupon-code-removed": "Gutscheincode entfernt",
     "history-fulfillment-created": "Auftrag ausgeführt",
+    "history-fulfillment-delivered": "",
+    "history-fulfillment-shipped": "",
+    "history-fulfillment-transition": "",
     "history-items-cancelled": "{count} {count, plural, one {Artikel} other {Artikel}} gestrichen",
     "history-order-cancelled": "Bestellung storniert",
+    "history-order-created": "",
     "history-order-fulfilled": "Auftrag ausgeführt",
     "history-order-transition": "Auftragsstatus von {from} nach {to}",
     "history-payment-settled": "Bezahlt",
@@ -583,6 +589,7 @@
     "refunded-count": "{count} {count, plural, one {Artikel} other {Artikel}} erstattet",
     "return-to-stock": "Zum Lagerbestand hinzufügen",
     "search-by-order-code": "Suche nach Bestellcode",
+    "set-fulfillment-state": "",
     "settle-payment": "Zahlung durchführen",
     "settle-payment-error": "Die Zahlung konnte nicht durchgeführt werden",
     "settle-payment-success": "Zahlung erfolgreich durchgeführt",
@@ -597,11 +604,14 @@
     "state-all-orders": "Alle Bestellungen",
     "state-arranging-payment": "Zahlung einrichten",
     "state-cancelled": "Storniert",
-    "state-fulfilled": "Ausgeführt",
-    "state-partially-fulfilled": "Teilweise ausgeführt",
+    "state-delivered": "Ausgeführt",
+    "state-partially-delivered": "Teilweise ausgeführt",
+    "state-partially-shipped": "",
     "state-payment-authorized": "Zahlung autorisiert",
     "state-payment-settled": "Bezahlt",
+    "state-shipped": "",
     "sub-total": "Zwischensumme",
+    "successfully-updated-fulfillment": "",
     "total": "Gesamtsumme",
     "tracking-code": "Sendungsverfolgungscode",
     "transaction-id": "Transaktions-ID",

packages/admin-ui/src/lib/static/i18n-messages/en.json

@@ -144,6 +144,7 @@
     "channel": "Channel",
     "channels": "Channels",
     "code": "Code",
+    "collapse-entries": "Collapse entries",
     "confirm": "Confirm",
     "confirm-delete-note": "Delete note?",
     "confirm-navigation": "Confirm navigation",
@@ -158,11 +159,11 @@
     "disabled": "Disabled",
     "discard-changes": "Discard changes",
     "display-custom-fields": "Display custom fields",
-    "done": "Done",
     "edit": "Edit",
     "edit-field": "Edit field",
     "edit-note": "Edit note",
     "enabled": "Enabled",
+    "expand-entries": "Expand entries",
     "extension-running-in-separate-window": "Extension is running in a separate window",
     "guest": "Guest",
     "hide-custom-fields": "Hide custom fields",
@@ -522,7 +523,8 @@
     "amount": "Amount",
     "billing-address": "Billing address",
     "cancel": "Cancel",
-    "cancel-order": "Cancel Order",
+    "cancel-fulfillment": "Cancel fulfillment",
+    "cancel-order": "Cancel order",
     "cancel-reason-customer-request": "Customer request",
     "cancel-reason-not-available": "Not available",
     "cancel-selected-items": "Cancel selected items",
@@ -539,8 +541,12 @@
     "history-coupon-code-applied": "Coupon code applied",
     "history-coupon-code-removed": "Coupon code removed",
     "history-fulfillment-created": "Fulfillment created",
+    "history-fulfillment-delivered": "Fulfillment delivered",
+    "history-fulfillment-shipped": "Fulfillment shipped",
+    "history-fulfillment-transition": "Fulfillment transitioned from {from} to {to}",
     "history-items-cancelled": "{count} {count, plural, one {item} other {items}} cancelled",
     "history-order-cancelled": "Order cancelled",
+    "history-order-created": "Order created",
     "history-order-fulfilled": "Order fulfilled",
     "history-order-transition": "Order transitioned from {from} to {to}",
     "history-payment-settled": "Payment settled",
@@ -583,9 +589,10 @@
     "refunded-count": "{count} {count, plural, one {item} other {items}} refunded",
     "return-to-stock": "Return to stock",
     "search-by-order-code": "Search by order code",
+    "set-fulfillment-state": "Mark as {state}",
     "settle-payment": "Settle payment",
     "settle-payment-error": "Could not settle payment",
-    "settle-payment-success": "Sucessfully settled payment",
+    "settle-payment-success": "Successfully settled payment",
     "settle-refund": "Settle refund",
     "settle-refund-manual-instructions": "After manually refunding via your payment provider ({method}), enter the transaction ID here.",
     "settle-refund-success": "Successfully settled refund",
@@ -597,11 +604,14 @@
     "state-all-orders": "All orders",
     "state-arranging-payment": "Arranging payment",
     "state-cancelled": "Cancelled",
-    "state-fulfilled": "Fulfilled",
-    "state-partially-fulfilled": "Partially fulfilled",
+    "state-delivered": "Delivered",
+    "state-partially-delivered": "Partially delivered",
+    "state-partially-shipped": "Partially shipped",
     "state-payment-authorized": "Payment authorized",
     "state-payment-settled": "Payment settled",
+    "state-shipped": "Shipped",
     "sub-total": "Sub total",
+    "successfully-updated-fulfillment": "Successfully updated fulfillment",
     "total": "Total",
     "tracking-code": "Tracking code",
     "transaction-id": "Transaction ID",

packages/admin-ui/src/lib/static/i18n-messages/es.json

@@ -144,6 +144,7 @@
     "channel": "Canal de ventas",
     "channels": "Canales de ventas",
     "code": "Código",
+    "collapse-entries": "",
     "confirm": "Confirmar",
     "confirm-delete-note": "¿Eliminar nota?",
     "confirm-navigation": "Confirmar navegación",
@@ -158,11 +159,11 @@
     "disabled": "Deshabilitado",
     "discard-changes": "Descartar cambios",
     "display-custom-fields": "Mostrar campos personalizados",
-    "done": "Hecho",
     "edit": "Editar",
     "edit-field": "Editar campo",
     "edit-note": "Editar nota",
     "enabled": "Habilitado",
+    "expand-entries": "",
     "extension-running-in-separate-window": "La extensión se está ejecutando en una nueva ventana",
     "guest": "Invitado",
     "hide-custom-fields": "Ocultar campos personalizados",
@@ -522,6 +523,7 @@
     "amount": "Precio",
     "billing-address": "",
     "cancel": "",
+    "cancel-fulfillment": "",
     "cancel-order": "",
     "cancel-reason-customer-request": "",
     "cancel-reason-not-available": "",
@@ -539,8 +541,12 @@
     "history-coupon-code-applied": "",
     "history-coupon-code-removed": "",
     "history-fulfillment-created": "",
+    "history-fulfillment-delivered": "",
+    "history-fulfillment-shipped": "",
+    "history-fulfillment-transition": "",
     "history-items-cancelled": "",
     "history-order-cancelled": "",
+    "history-order-created": "",
     "history-order-fulfilled": "",
     "history-order-transition": "",
     "history-payment-settled": "",
@@ -583,6 +589,7 @@
     "refunded-count": "",
     "return-to-stock": "",
     "search-by-order-code": "",
+    "set-fulfillment-state": "",
     "settle-payment": "",
     "settle-payment-error": "",
     "settle-payment-success": "",
@@ -597,11 +604,14 @@
     "state-all-orders": "",
     "state-arranging-payment": "",
     "state-cancelled": "",
-    "state-fulfilled": "",
-    "state-partially-fulfilled": "",
+    "state-delivered": "",
+    "state-partially-delivered": "",
+    "state-partially-shipped": "",
     "state-payment-authorized": "",
     "state-payment-settled": "",
+    "state-shipped": "",
     "sub-total": "Sub total",
+    "successfully-updated-fulfillment": "",
     "total": "Total",
     "tracking-code": "",
     "transaction-id": "ID de transacción",

packages/admin-ui/src/lib/static/i18n-messages/pl.json

@@ -144,6 +144,7 @@
     "channel": "Kanał",
     "channels": "Kanały",
     "code": "Kod",
+    "collapse-entries": "",
     "confirm": "",
     "confirm-delete-note": "",
     "confirm-navigation": "Potwierdź nawigacje",
@@ -158,11 +159,11 @@
     "disabled": "Wyłączony",
     "discard-changes": "Odrzuć zmiany",
     "display-custom-fields": "Wyświetl pola dodatkowe",
-    "done": "Skończone",
     "edit": "Edytuj",
     "edit-field": "Edytuj pole",
     "edit-note": "",
     "enabled": "Aktywny",
+    "expand-entries": "",
     "extension-running-in-separate-window": "Rozszerzenie jest włączone w innym oknie",
     "guest": "Gość",
     "hide-custom-fields": "Ukryj pola dodatkowe",
@@ -522,6 +523,7 @@
     "amount": "Ilość",
     "billing-address": "",
     "cancel": "Anuluj",
+    "cancel-fulfillment": "",
     "cancel-order": "Anuluj zamówienie",
     "cancel-reason-customer-request": "Prośba klienta",
     "cancel-reason-not-available": "Niedostępny",
@@ -538,9 +540,13 @@
     "fulfillment-method": "Metoda realizacji",
     "history-coupon-code-applied": "Użyto kodu rabatowego",
     "history-coupon-code-removed": "Usunięto kod rabatowy",
-    "history-fulfillment-created": "Utworzono wypełnienie",
+    "history-fulfillment-created": "",
+    "history-fulfillment-delivered": "",
+    "history-fulfillment-shipped": "",
+    "history-fulfillment-transition": "",
     "history-items-cancelled": "{count} {count, plural, one {element} other {elementów}} anulowano",
     "history-order-cancelled": "Zamówienie anulowane",
+    "history-order-created": "",
     "history-order-fulfilled": "Zamówienie zrealizowane",
     "history-order-transition": "Zamówienie wysłane z {from} do {to}",
     "history-payment-settled": "Opłacono",
@@ -583,6 +589,7 @@
     "refunded-count": "{count} {count, plural, one {zamówienie} other {zamówień}} zwrócono",
     "return-to-stock": "Zwróć do magazynu",
     "search-by-order-code": "Szukaj po numerze zamówienia",
+    "set-fulfillment-state": "",
     "settle-payment": "Rozlicz płatność",
     "settle-payment-error": "Nie można rozliczyć płatności",
     "settle-payment-success": "Płatność rozliczona pomyślnie",
@@ -597,11 +604,14 @@
     "state-all-orders": "Wszystkie zamówienia",
     "state-arranging-payment": "Oczekiwanie na płatność",
     "state-cancelled": "Anulowano",
-    "state-fulfilled": "Zrealizowano",
-    "state-partially-fulfilled": "Częściowo zrealizowano",
+    "state-delivered": "Zrealizowano",
+    "state-partially-delivered": "Częściowo zrealizowano",
+    "state-partially-shipped": "",
     "state-payment-authorized": "Płatność zaakceptowana",
     "state-payment-settled": "Płatność rozliczona",
+    "state-shipped": "",
     "sub-total": "Sub total",
+    "successfully-updated-fulfillment": "",
     "total": "Total",
     "tracking-code": "Numer przesyłki",
     "transaction-id": "Numer transakcji",

packages/admin-ui/src/lib/static/i18n-messages/pt_BR.json

@@ -144,6 +144,7 @@
     "channel": "Canal",
     "channels": "Canais",
     "code": "Código",
+    "collapse-entries": "",
     "confirm": "Confirme",
     "confirm-delete-note": "Excluir nota?",
     "confirm-navigation": "Confrme navegação",
@@ -158,11 +159,11 @@
     "disabled": "Desabilitado",
     "discard-changes": "Descartar modificações",
     "display-custom-fields": "Exibir campos personalizados",
-    "done": "Pronto",
     "edit": "Editar",
     "edit-field": "Editar campo",
     "edit-note": "Editar nota",
     "enabled": "Habilitado",
+    "expand-entries": "",
     "extension-running-in-separate-window": "A extensão está sendo executada em uma janela separada",
     "guest": "Convidado",
     "hide-custom-fields": "Ocultar campos personalizados",
@@ -522,6 +523,7 @@
     "amount": "Total",
     "billing-address": "Endereço de cobrança",
     "cancel": "Cancelar",
+    "cancel-fulfillment": "",
     "cancel-order": "Cancelar Pedido",
     "cancel-reason-customer-request": "Pedido do cliente",
     "cancel-reason-not-available": "Não disponível",
@@ -538,9 +540,13 @@
     "fulfillment-method": "Método de execução",
     "history-coupon-code-applied": "Código de cupom aplicado",
     "history-coupon-code-removed": "Código de cupom excluído",
-    "history-fulfillment-created": "Execução criada",
+    "history-fulfillment-created": "",
+    "history-fulfillment-delivered": "",
+    "history-fulfillment-shipped": "",
+    "history-fulfillment-transition": "",
     "history-items-cancelled": "{count} {count, plural, one {item} other {items}} cancelado",
     "history-order-cancelled": "Pedido cancelado",
+    "history-order-created": "",
     "history-order-fulfilled": "Pedido realizado",
     "history-order-transition": "Pedido transferido de {from} para {to}",
     "history-payment-settled": "Pagamento concluído",
@@ -583,6 +589,7 @@
     "refunded-count": "{count} {count, plural, one {item} other {items}} reembolsado",
     "return-to-stock": "Retorno ao estoque",
     "search-by-order-code": "Buscar por código do pedido",
+    "set-fulfillment-state": "",
     "settle-payment": "Liquidar pagamento",
     "settle-payment-error": "Não posso liquidar pagamento",
     "settle-payment-success": "Pagamento liquidado com sucesso",
@@ -597,11 +604,14 @@
     "state-all-orders": "Todos os pedidos",
     "state-arranging-payment": "Organização de pagamento",
     "state-cancelled": "Cancelado",
-    "state-fulfilled": "Realizado",
-    "state-partially-fulfilled": "Parcialmente realizado",
+    "state-delivered": "Realizado",
+    "state-partially-delivered": "Parcialmente realizado",
+    "state-partially-shipped": "",
     "state-payment-authorized": "Pagamento autorizado",
     "state-payment-settled": "Pagamento liquidado",
+    "state-shipped": "",
     "sub-total": "Subtotal",
+    "successfully-updated-fulfillment": "",
     "total": "Total",
     "tracking-code": "Código de rastreio",
     "transaction-id": "Código ID da transação",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hans.json

@@ -144,6 +144,7 @@
     "channel": "销售渠道",
     "channels": "销售渠道",
     "code": "编码",
+    "collapse-entries": "",
     "confirm": "",
     "confirm-delete-note": "",
     "confirm-navigation": "导航确认",
@@ -158,11 +159,11 @@
     "disabled": "禁用",
     "discard-changes": "放弃修改",
     "display-custom-fields": "显示客户化字段",
-    "done": "完成",
     "edit": "编辑",
     "edit-field": "编辑域",
     "edit-note": "",
     "enabled": "启用",
+    "expand-entries": "",
     "extension-running-in-separate-window": "扩展已在另一个窗口启动",
     "guest": "游客",
     "hide-custom-fields": "隐藏客户化字段",
@@ -522,6 +523,7 @@
     "amount": "金额",
     "billing-address": "",
     "cancel": "取消",
+    "cancel-fulfillment": "",
     "cancel-order": "取消订单",
     "cancel-reason-customer-request": "客户要求",
     "cancel-reason-not-available": "产品无库存",
@@ -538,9 +540,13 @@
     "fulfillment-method": "配货方式",
     "history-coupon-code-applied": "优惠卷已使用",
     "history-coupon-code-removed": "优惠卷已移除",
-    "history-fulfillment-created": "配货记录创建成功",
+    "history-fulfillment-created": "",
+    "history-fulfillment-delivered": "",
+    "history-fulfillment-shipped": "",
+    "history-fulfillment-transition": "",
     "history-items-cancelled": "{count}个已取消",
     "history-order-cancelled": "订单已取消",
+    "history-order-created": "",
     "history-order-fulfilled": "订单已配货",
     "history-order-transition": "订单状态从{from}更新至{to}",
     "history-payment-settled": "已结算付款",
@@ -583,6 +589,7 @@
     "refunded-count": "{count}个商品已退款",
     "return-to-stock": "返回商品至库存",
     "search-by-order-code": "输入要搜索的订单编号",
+    "set-fulfillment-state": "",
     "settle-payment": "结算付款",
     "settle-payment-error": "结算付款失败",
     "settle-payment-success": "结算付款成功",
@@ -597,11 +604,14 @@
     "state-all-orders": "所有订单",
     "state-arranging-payment": "正在付款",
     "state-cancelled": "已取消",
-    "state-fulfilled": "已完成",
-    "state-partially-fulfilled": "部分配货",
+    "state-delivered": "已完成",
+    "state-partially-delivered": "部分配货",
+    "state-partially-shipped": "",
     "state-payment-authorized": "已授权支付",
     "state-payment-settled": "已结算",
+    "state-shipped": "",
     "sub-total": "小计金额",
+    "successfully-updated-fulfillment": "",
     "total": "总计金额",
     "tracking-code": "物流码",
     "transaction-id": "交易ID",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hant.json

@@ -144,6 +144,7 @@
     "channel": "渠道",
     "channels": "渠道",
     "code": "編碼",
+    "collapse-entries": "",
     "confirm": "",
     "confirm-delete-note": "",
     "confirm-navigation": "導航確認",
@@ -158,11 +159,11 @@
     "disabled": "禁用",
     "discard-changes": "放弃修改",
     "display-custom-fields": "顯示客戶自訂欄位",
-    "done": "完成",
     "edit": "編辑",
     "edit-field": "編辑域",
     "edit-note": "",
     "enabled": "启用",
+    "expand-entries": "",
     "extension-running-in-separate-window": "扩展已在另一個窗口启動",
     "guest": "游客",
     "hide-custom-fields": "隱藏客戶自訂欄位",
@@ -522,6 +523,7 @@
     "amount": "金額",
     "billing-address": "",
     "cancel": "取消",
+    "cancel-fulfillment": "",
     "cancel-order": "取消訂單",
     "cancel-reason-customer-request": "客户要求",
     "cancel-reason-not-available": "產品無庫存",
@@ -538,9 +540,13 @@
     "fulfillment-method": "配貨方式",
     "history-coupon-code-applied": "優惠卷已使用",
     "history-coupon-code-removed": "優惠卷已移除",
-    "history-fulfillment-created": "配貨記錄建立成功",
+    "history-fulfillment-created": "",
+    "history-fulfillment-delivered": "",
+    "history-fulfillment-shipped": "",
+    "history-fulfillment-transition": "",
     "history-items-cancelled": "{count}個已取消",
     "history-order-cancelled": "訂單已取消",
+    "history-order-created": "",
     "history-order-fulfilled": "訂單已配貨",
     "history-order-transition": "訂單狀態從{from}更新至{to}",
     "history-payment-settled": "已結算付款",
@@ -583,6 +589,7 @@
     "refunded-count": "{count}個商品已退款",
     "return-to-stock": "返回商品至庫存",
     "search-by-order-code": "輸入要搜索的訂單編號",
+    "set-fulfillment-state": "",
     "settle-payment": "結算付款",
     "settle-payment-error": "結算付款失敗",
     "settle-payment-success": "結算付款成功",
@@ -597,11 +604,14 @@
     "state-all-orders": "所有訂單",
     "state-arranging-payment": "正在付款",
     "state-cancelled": "已取消",
-    "state-fulfilled": "已完成",
-    "state-partially-fulfilled": "部分配貨",
+    "state-delivered": "已完成",
+    "state-partially-delivered": "部分配貨",
+    "state-partially-shipped": "",
     "state-payment-authorized": "已授權支付",
     "state-payment-settled": "已結算",
+    "state-shipped": "",
     "sub-total": "小計金額",
+    "successfully-updated-fulfillment": "",
     "total": "總計金額",
     "tracking-code": "物流碼",
     "transaction-id": "交易編號",

packages/admin-ui/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "baseUrl": "./",
     "importHelpers": true,
-    "module": "esnext",
+    "module": "es2020",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
@@ -59,4 +59,4 @@
       ]
     }
   }
-}
+}

packages/asset-server-plugin/e2e/asset-server-plugin.e2e-spec.ts

@@ -63,8 +63,8 @@ describe('AssetServerPlugin', () => {
         const { createAssets }: CreateAssets.Mutation = await adminClient.fileUploadMutation({
             mutation: CREATE_ASSETS,
             filePaths: filesToUpload,
-            mapVariables: (filePaths) => ({
-                input: filePaths.map((p) => ({ file: null })),
+            mapVariables: filePaths => ({
+                input: filePaths.map(p => ({ file: null })),
             }),
         });
 
@@ -188,7 +188,7 @@ describe('AssetServerPlugin', () => {
         let testImages: CreateAssets.CreateAssets[] = [];
 
         async function testMimeTypeOfAssetWithExt(ext: string, expectedMimeType: string) {
-            const testImage = testImages.find((i) => i.source.endsWith(ext))!;
+            const testImage = testImages.find(i => i.source.endsWith(ext))!;
             const result = await fetch(testImage.source);
             const contentType = result.headers.get('Content-Type');
 
@@ -198,12 +198,12 @@ describe('AssetServerPlugin', () => {
         beforeAll(async () => {
             const formats = ['gif', 'jpg', 'png', 'svg', 'tiff', 'webp'];
 
-            const filesToUpload = formats.map((ext) => path.join(__dirname, `fixtures/assets/test.${ext}`));
+            const filesToUpload = formats.map(ext => path.join(__dirname, `fixtures/assets/test.${ext}`));
             const { createAssets }: CreateAssets.Mutation = await adminClient.fileUploadMutation({
                 mutation: CREATE_ASSETS,
                 filePaths: filesToUpload,
-                mapVariables: (filePaths) => ({
-                    input: filePaths.map((p) => ({ file: null })),
+                mapVariables: filePaths => ({
+                    input: filePaths.map(p => ({ file: null })),
                 }),
             });
 
@@ -239,13 +239,15 @@ describe('AssetServerPlugin', () => {
 export const CREATE_ASSETS = gql`
     mutation CreateAssets($input: [CreateAssetInput!]!) {
         createAssets(input: $input) {
-            id
-            name
-            source
-            preview
-            focalPoint {
-                x
-                y
+            ... on Asset {
+                id
+                name
+                source
+                preview
+                focalPoint {
+                    x
+                    y
+                }
             }
         }
     }

packages/asset-server-plugin/package.json

@@ -18,21 +18,21 @@
     "access": "public"
   },
   "devDependencies": {
-    "@types/express": "^4.0.39",
-    "@types/fs-extra": "^8.0.1",
-    "@types/node-fetch": "^2.5.4",
-    "@types/sharp": "^0.24.0",
+    "@types/express": "^4.17.8",
+    "@types/fs-extra": "^9.0.1",
+    "@types/node-fetch": "^2.5.7",
+    "@types/sharp": "^0.26.0",
     "@vendure/common": "^0.15.0",
     "@vendure/core": "^0.15.2",
-    "aws-sdk": "^2.670.0",
-    "express": "^4.16.4",
-    "node-fetch": "^2.6.0",
-    "rimraf": "^3.0.0",
-    "typescript": "3.8.3"
+    "aws-sdk": "^2.766.0",
+    "express": "^4.17.1",
+    "node-fetch": "^2.6.1",
+    "rimraf": "^3.0.2",
+    "typescript": "4.0.3"
   },
   "dependencies": {
-    "file-type": "^14.3.0",
-    "fs-extra": "^9.0.0",
+    "file-type": "^15.0.1",
+    "fs-extra": "^9.0.1",
     "sharp": "0.25.2"
   }
 }

packages/asset-server-plugin/src/plugin.ts

@@ -125,7 +125,7 @@ import { AssetServerOptions, ImageTransformPreset } from './types';
  */
 @VendurePlugin({
     imports: [PluginCommonModule, TerminusModule],
-    configuration: (config) => AssetServerPlugin.configure(config),
+    configuration: config => AssetServerPlugin.configure(config),
 })
 export class AssetServerPlugin implements OnVendureBootstrap, OnVendureClose {
     private server: Server;
@@ -177,7 +177,7 @@ export class AssetServerPlugin implements OnVendureBootstrap, OnVendureClose {
     onVendureBootstrap(): void | Promise<void> {
         if (AssetServerPlugin.options.presets) {
             for (const preset of AssetServerPlugin.options.presets) {
-                const existingIndex = this.presets.findIndex((p) => p.name === preset.name);
+                const existingIndex = this.presets.findIndex(p => p.name === preset.name);
                 if (-1 < existingIndex) {
                     this.presets.splice(existingIndex, 1, preset);
                 } else {
@@ -194,7 +194,7 @@ export class AssetServerPlugin implements OnVendureBootstrap, OnVendureClose {
 
     /** @internal */
     onVendureClose(): Promise<void> {
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
             this.server.close(() => resolve());
         });
     }
@@ -260,7 +260,7 @@ export class AssetServerPlugin implements OnVendureBootstrap, OnVendureClose {
                         res.status(404).send('Resource not found');
                         return;
                     }
-                    const image = await transformImage(file, req.query, this.presets || []);
+                    const image = await transformImage(file, req.query as any, this.presets || []);
                     try {
                         const imageBuffer = await image.toBuffer();
                         if (!req.query.cache || req.query.cache === 'true') {
@@ -292,7 +292,7 @@ export class AssetServerPlugin implements OnVendureBootstrap, OnVendureClose {
             const height = h || '';
             imageParamHash = this.md5(`_transform_w${width}_h${height}_m${mode}${focalPoint}`);
         } else if (preset) {
-            if (this.presets && !!this.presets.find((p) => p.name === preset)) {
+            if (this.presets && !!this.presets.find(p => p.name === preset)) {
                 imageParamHash = this.md5(`_transform_pre_${preset}${focalPoint}`);
             }
         }

packages/asset-server-plugin/src/s3-asset-storage-strategy.ts

@@ -114,6 +114,7 @@ export function configureS3AssetStorage(s3Config: S3Config) {
  *
  * @docsCategory asset-server-plugin
  * @docsPage S3AssetStorageStrategy
+ * @docsWeight 0
  */
 export class S3AssetStorageStrategy implements AssetStorageStrategy {
     private AWS: typeof import('aws-sdk');

packages/common/package.json

@@ -17,7 +17,7 @@
     "lib/**/*"
   ],
   "devDependencies": {
-    "rimraf": "^3.0.0",
-    "typescript": "3.8.3"
+    "rimraf": "^3.0.2",
+    "typescript": "4.0.3"
   }
 }

packages/common/src/omit.ts

@@ -21,21 +21,18 @@ export function omit<T extends any, K extends keyof T>(
     }
 
     if (recursive && Array.isArray(obj)) {
-        return obj.map((item: any) => omit(item, keysToOmit, true));
+        return obj.map((item: any) => omit(item, keysToOmit, true)) as T;
     }
 
-    return Object.keys(obj).reduce(
-        (output: any, key) => {
-            if (keysToOmit.includes(key)) {
-                return output;
-            }
-            if (recursive) {
-                return { ...output, [key]: omit((obj as any)[key], keysToOmit, true) };
-            }
-            return { ...output, [key]: (obj as any)[key] };
-        },
-        {} as Omit<T, K>,
-    );
+    return Object.keys(obj as object).reduce((output: any, key) => {
+        if (keysToOmit.includes(key)) {
+            return output;
+        }
+        if (recursive) {
+            return { ...output, [key]: omit((obj as any)[key], keysToOmit, true) };
+        }
+        return { ...output, [key]: (obj as any)[key] };
+    }, {} as Omit<T, K>);
 }
 
 function isObject(input: any): input is object {

packages/core/e2e/asset.e2e-spec.ts

@@ -1,7 +1,7 @@
 /* tslint:disable:no-non-null-assertion */
 import { omit } from '@vendure/common/lib/omit';
 import { mergeConfig } from '@vendure/core';
-import { createTestEnvironment } from '@vendure/testing';
+import { createErrorResultGuard, createTestEnvironment, ErrorResultGuard } from '@vendure/testing';
 import gql from 'graphql-tag';
 import path from 'path';
 
@@ -10,6 +10,7 @@ import { TEST_SETUP_TIMEOUT_MS, testConfig } from '../../../e2e-common/test-conf
 
 import { ASSET_FRAGMENT } from './graphql/fragments';
 import {
+    AssetFragment,
     CreateAssets,
     DeleteAsset,
     DeletionResult,
@@ -26,7 +27,6 @@ import {
     GET_PRODUCT_WITH_VARIANTS,
     UPDATE_ASSET,
 } from './graphql/shared-definitions';
-import { assertThrowsWithMessage } from './utils/assert-throws-with-message';
 
 describe('Asset resolver', () => {
     const { server, adminClient } = createTestEnvironment(
@@ -137,6 +137,10 @@ describe('Asset resolver', () => {
     });
 
     describe('createAssets', () => {
+        function isAsset(input: CreateAssets.CreateAssets): input is AssetFragment {
+            return input.hasOwnProperty('name');
+        }
+
         it('permitted types by mime type', async () => {
             const filesToUpload = [
                 path.join(__dirname, 'fixtures/assets/pps1.jpg'),
@@ -150,30 +154,30 @@ describe('Asset resolver', () => {
                 }),
             });
 
-            expect(createAssets.map(a => omit(a, ['id'])).sort((a, b) => (a.name < b.name ? -1 : 1))).toEqual(
-                [
-                    {
-                        fileSize: 1680,
-                        focalPoint: null,
-                        mimeType: 'image/jpeg',
-                        name: 'pps1.jpg',
-                        preview: 'test-url/test-assets/pps1__preview.jpg',
-                        source: 'test-url/test-assets/pps1.jpg',
-                        type: 'IMAGE',
-                    },
-                    {
-                        fileSize: 1680,
-                        focalPoint: null,
-                        mimeType: 'image/jpeg',
-                        name: 'pps2.jpg',
-                        preview: 'test-url/test-assets/pps2__preview.jpg',
-                        source: 'test-url/test-assets/pps2.jpg',
-                        type: 'IMAGE',
-                    },
-                ],
-            );
+            expect(createAssets.length).toBe(2);
+            const results = createAssets.filter(isAsset);
+            expect(results.map(a => omit(a, ['id'])).sort((a, b) => (a.name < b.name ? -1 : 1))).toEqual([
+                {
+                    fileSize: 1680,
+                    focalPoint: null,
+                    mimeType: 'image/jpeg',
+                    name: 'pps1.jpg',
+                    preview: 'test-url/test-assets/pps1__preview.jpg',
+                    source: 'test-url/test-assets/pps1.jpg',
+                    type: 'IMAGE',
+                },
+                {
+                    fileSize: 1680,
+                    focalPoint: null,
+                    mimeType: 'image/jpeg',
+                    name: 'pps2.jpg',
+                    preview: 'test-url/test-assets/pps2__preview.jpg',
+                    source: 'test-url/test-assets/pps2.jpg',
+                    type: 'IMAGE',
+                },
+            ]);
 
-            createdAssetId = createAssets[0].id;
+            createdAssetId = results[0].id;
         });
 
         it('permitted type by file extension', async () => {
@@ -186,7 +190,9 @@ describe('Asset resolver', () => {
                 }),
             });
 
-            expect(createAssets.map(a => omit(a, ['id']))).toEqual([
+            expect(createAssets.length).toBe(1);
+            const results = createAssets.filter(isAsset);
+            expect(results.map(a => omit(a, ['id']))).toEqual([
                 {
                     fileSize: 1680,
                     focalPoint: null,
@@ -199,19 +205,23 @@ describe('Asset resolver', () => {
             ]);
         });
 
-        it(
-            'not permitted type',
-            assertThrowsWithMessage(async () => {
-                const filesToUpload = [path.join(__dirname, 'fixtures/assets/dummy.txt')];
-                const { createAssets }: CreateAssets.Mutation = await adminClient.fileUploadMutation({
-                    mutation: CREATE_ASSETS,
-                    filePaths: filesToUpload,
-                    mapVariables: filePaths => ({
-                        input: filePaths.map(p => ({ file: null })),
-                    }),
-                });
-            }, `The MIME type 'text/plain' is not permitted.`),
-        );
+        it('not permitted type', async () => {
+            const filesToUpload = [path.join(__dirname, 'fixtures/assets/dummy.txt')];
+            const { createAssets }: CreateAssets.Mutation = await adminClient.fileUploadMutation({
+                mutation: CREATE_ASSETS,
+                filePaths: filesToUpload,
+                mapVariables: filePaths => ({
+                    input: filePaths.map(p => ({ file: null })),
+                }),
+            });
+
+            expect(createAssets.length).toBe(1);
+            expect(createAssets[0]).toEqual({
+                message: `The MIME type 'text/plain' is not permitted.`,
+                mimeType: 'text/plain',
+                fileName: 'dummy.txt',
+            });
+        });
     });
 
     describe('updateAsset', () => {
@@ -375,9 +385,16 @@ export const CREATE_ASSETS = gql`
     mutation CreateAssets($input: [CreateAssetInput!]!) {
         createAssets(input: $input) {
             ...Asset
-            focalPoint {
-                x
-                y
+            ... on Asset {
+                focalPoint {
+                    x
+                    y
+                }
+            }
+            ... on MimeTypeError {
+                message
+                fileName
+                mimeType
             }
         }
     }

packages/core/e2e/auth.e2e-spec.ts

@@ -11,6 +11,7 @@ import { TEST_SETUP_TIMEOUT_MS, testConfig } from '../../../e2e-common/test-conf
 import {
     CreateAdministrator,
     CreateRole,
+    ErrorCode,
     GetCustomerList,
     Me,
     MutationCreateProductArgs,
@@ -76,12 +77,11 @@ describe('Authorization & permissions', () => {
                 customerEmailAddress = customers.items[0].emailAddress;
             });
 
-            it(
-                'cannot login',
-                assertThrowsWithMessage(async () => {
-                    await adminClient.asUserWithCredentials(customerEmailAddress, 'test');
-                }, 'The credentials did not match. Please check and try again'),
-            );
+            it('cannot login', async () => {
+                const result = await adminClient.asUserWithCredentials(customerEmailAddress, 'test');
+
+                expect(result.errorCode).toBe(ErrorCode.INVALID_CREDENTIALS_ERROR);
+            });
         });
 
         describe('ReadCatalog permission', () => {
@@ -153,7 +153,9 @@ describe('Authorization & permissions', () => {
                     gql`
                         mutation CanCreateCustomer($input: CreateCustomerInput!) {
                             createCustomer(input: $input) {
-                                id
+                                ... on Customer {
+                                    id
+                                }
                             }
                         }
                     `,
@@ -214,9 +216,7 @@ describe('Authorization & permissions', () => {
 
         const role = roleResult.createRole;
 
-        const identifier = `${code}@${Math.random()
-            .toString(16)
-            .substr(2, 8)}`;
+        const identifier = `${code}@${Math.random().toString(16).substr(2, 8)}`;
         const password = `test`;
 
         const adminResult = await adminClient.query<

packages/core/e2e/authentication-strategy.e2e-spec.ts

@@ -1,16 +1,21 @@
+import { ErrorCode } from '@vendure/common/lib/generated-shop-types';
 import { pick } from '@vendure/common/lib/pick';
 import { mergeConfig } from '@vendure/core';
-import { createTestEnvironment } from '@vendure/testing';
+import { createErrorResultGuard, createTestEnvironment, ErrorResultGuard } from '@vendure/testing';
 import gql from 'graphql-tag';
 import path from 'path';
 
 import { initialData } from '../../../e2e-common/e2e-initial-data';
-import { testConfig, TEST_SETUP_TIMEOUT_MS } from '../../../e2e-common/test-config';
+import { TEST_SETUP_TIMEOUT_MS, testConfig } from '../../../e2e-common/test-config';
 import { NativeAuthenticationStrategy } from '../src/config/auth/native-authentication-strategy';
+import { DefaultLogger } from '../src/config/logger/default-logger';
 
 import { TestAuthenticationStrategy, VALID_AUTH_TOKEN } from './fixtures/test-authentication-strategies';
+import { CURRENT_USER_FRAGMENT } from './graphql/fragments';
 import {
     Authenticate,
+    CurrentUser,
+    CurrentUserFragment,
     GetCustomerHistory,
     GetCustomers,
     GetCustomerUserAuth,
@@ -47,6 +52,10 @@ describe('AuthenticationStrategy', () => {
         await server.destroy();
     });
 
+    const currentUserGuard: ErrorResultGuard<CurrentUserFragment> = createErrorResultGuard<
+        CurrentUserFragment
+    >(input => input.identifier != null);
+
     describe('external auth', () => {
         const userData = {
             email: 'test@email.com',
@@ -55,24 +64,24 @@ describe('AuthenticationStrategy', () => {
         };
         let newCustomerId: string;
 
-        it(
-            'fails with a bad token',
-            assertThrowsWithMessage(async () => {
-                await shopClient.query(AUTHENTICATE, {
-                    input: {
-                        test_strategy: {
-                            token: 'bad-token',
-                        },
+        it('fails with a bad token', async () => {
+            const { authenticate } = await shopClient.query(AUTHENTICATE, {
+                input: {
+                    test_strategy: {
+                        token: 'bad-token',
                     },
-                });
-            }, 'The credentials did not match. Please check and try again'),
-        );
+                },
+            });
+
+            expect(authenticate.message).toBe('The provided credentials are invalid');
+            expect(authenticate.errorCode).toBe(ErrorCode.INVALID_CREDENTIALS_ERROR);
+        });
 
         it('creates a new Customer with valid token', async () => {
             const { customers: before } = await adminClient.query<GetCustomers.Query>(GET_CUSTOMERS);
             expect(before.totalItems).toBe(1);
 
-            const result = await shopClient.query<Authenticate.Mutation>(AUTHENTICATE, {
+            const { authenticate } = await shopClient.query<Authenticate.Mutation>(AUTHENTICATE, {
                 input: {
                     test_strategy: {
                         token: VALID_AUTH_TOKEN,
@@ -80,7 +89,9 @@ describe('AuthenticationStrategy', () => {
                     },
                 },
             });
-            expect(result.authenticate.user.identifier).toEqual(userData.email);
+            currentUserGuard.assertSuccess(authenticate);
+
+            expect(authenticate.identifier).toEqual(userData.email);
 
             const { customers: after } = await adminClient.query<GetCustomers.Query>(GET_CUSTOMERS);
             expect(after.totalItems).toBe(2);
@@ -99,7 +110,9 @@ describe('AuthenticationStrategy', () => {
                 id: newCustomerId,
             });
 
-            expect(customer?.history.items.map(pick(['type', 'data']))).toEqual([
+            expect(
+                customer?.history.items.sort((a, b) => (a.id > b.id ? 1 : -1)).map(pick(['type', 'data'])),
+            ).toEqual([
                 {
                     type: HistoryEntryType.CUSTOMER_REGISTERED,
                     data: {
@@ -138,7 +151,7 @@ describe('AuthenticationStrategy', () => {
         });
 
         it('logging in again re-uses created User & Customer', async () => {
-            const result = await shopClient.query<Authenticate.Mutation>(AUTHENTICATE, {
+            const { authenticate } = await shopClient.query<Authenticate.Mutation>(AUTHENTICATE, {
                 input: {
                     test_strategy: {
                         token: VALID_AUTH_TOKEN,
@@ -146,7 +159,9 @@ describe('AuthenticationStrategy', () => {
                     },
                 },
             });
-            expect(result.authenticate.user.identifier).toEqual(userData.email);
+            currentUserGuard.assertSuccess(authenticate);
+
+            expect(authenticate.identifier).toEqual(userData.email);
 
             const { customers: after } = await adminClient.query<GetCustomers.Query>(GET_CUSTOMERS);
             expect(after.totalItems).toBe(2);
@@ -157,6 +172,10 @@ describe('AuthenticationStrategy', () => {
         });
 
         it('registerCustomerAccount with external email', async () => {
+            const successErrorGuard: ErrorResultGuard<{ success: boolean }> = createErrorResultGuard<{
+                success: boolean;
+            }>(input => input.success != null);
+
             const { registerCustomerAccount } = await shopClient.query<Register.Mutation, Register.Variables>(
                 REGISTER_ACCOUNT,
                 {
@@ -165,8 +184,9 @@ describe('AuthenticationStrategy', () => {
                     },
                 },
             );
+            successErrorGuard.assertSuccess(registerCustomerAccount);
 
-            expect(registerCustomerAccount).toBe(true);
+            expect(registerCustomerAccount.success).toBe(true);
             const { customer } = await adminClient.query<
                 GetCustomerUserAuth.Query,
                 GetCustomerUserAuth.Variables
@@ -202,12 +222,14 @@ describe('AuthenticationStrategy', () => {
 const AUTHENTICATE = gql`
     mutation Authenticate($input: AuthenticationInput!) {
         authenticate(input: $input) {
-            user {
-                id
-                identifier
+            ...CurrentUser
+            ... on ErrorResult {
+                errorCode
+                message
             }
         }
     }
+    ${CURRENT_USER_FRAGMENT}
 `;
 
 const GET_CUSTOMERS = gql`

packages/core/e2e/channel.e2e-spec.ts

@@ -1,20 +1,27 @@
 /* tslint:disable:no-non-null-assertion */
 import { DEFAULT_CHANNEL_CODE } from '@vendure/common/lib/shared-constants';
-import { createTestEnvironment, E2E_DEFAULT_CHANNEL_TOKEN } from '@vendure/testing';
+import {
+    createErrorResultGuard,
+    createTestEnvironment,
+    E2E_DEFAULT_CHANNEL_TOKEN,
+    ErrorResultGuard,
+} from '@vendure/testing';
 import gql from 'graphql-tag';
 import path from 'path';
 
 import { initialData } from '../../../e2e-common/e2e-initial-data';
-import { testConfig, TEST_SETUP_TIMEOUT_MS } from '../../../e2e-common/test-config';
+import { TEST_SETUP_TIMEOUT_MS, testConfig } from '../../../e2e-common/test-config';
 
 import {
     AssignProductsToChannel,
+    ChannelFragment,
     CreateAdministrator,
     CreateChannel,
     CreateRole,
     CurrencyCode,
     DeleteChannel,
     DeletionResult,
+    ErrorCode,
     GetChannels,
     GetCustomerList,
     GetProductWithVariants,
@@ -23,7 +30,7 @@ import {
     Permission,
     RemoveProductsFromChannel,
     UpdateChannel,
-    UpdateGlobalSettings,
+    UpdateGlobalLanguages,
 } from './graphql/generated-e2e-admin-types';
 import {
     ASSIGN_PRODUCT_TO_CHANNEL,
@@ -45,6 +52,10 @@ describe('Channels', () => {
     let secondChannelAdminRole: CreateRole.CreateRole;
     let customerUser: GetCustomerList.Items;
 
+    const channelGuard: ErrorResultGuard<ChannelFragment> = createErrorResultGuard<ChannelFragment>(
+        input => !!input.defaultLanguageCode,
+    );
+
     beforeAll(async () => {
         await server.init({
             initialData,
@@ -66,6 +77,30 @@ describe('Channels', () => {
         await server.destroy();
     });
 
+    it('createChannel returns error result defaultLanguageCode not available', async () => {
+        const { createChannel } = await adminClient.query<CreateChannel.Mutation, CreateChannel.Variables>(
+            CREATE_CHANNEL,
+            {
+                input: {
+                    code: 'second-channel',
+                    token: SECOND_CHANNEL_TOKEN,
+                    defaultLanguageCode: LanguageCode.zh,
+                    currencyCode: CurrencyCode.GBP,
+                    pricesIncludeTax: true,
+                    defaultShippingZoneId: 'T_1',
+                    defaultTaxZoneId: 'T_1',
+                },
+            },
+        );
+        channelGuard.assertErrorResult(createChannel);
+
+        expect(createChannel.message).toBe(
+            'Language "zh" is not available. First enable it via GlobalSettings and try again',
+        );
+        expect(createChannel.errorCode).toBe(ErrorCode.LANGUAGE_NOT_AVAILABLE_ERROR);
+        expect(createChannel.languageCode).toBe('zh');
+    });
+
     it('create a new Channel', async () => {
         const { createChannel } = await adminClient.query<CreateChannel.Mutation, CreateChannel.Variables>(
             CREATE_CHANNEL,
@@ -81,6 +116,7 @@ describe('Channels', () => {
                 },
             },
         );
+        channelGuard.assertSuccess(createChannel);
 
         expect(createChannel).toEqual({
             id: 'T_2',
@@ -356,21 +392,28 @@ describe('Channels', () => {
     });
 
     describe('setting defaultLanguage', () => {
-        it(
-            'throws if languageCode not in availableLanguages',
-            assertThrowsWithMessage(async () => {
-                await adminClient.query<UpdateChannel.Mutation, UpdateChannel.Variables>(UPDATE_CHANNEL, {
-                    input: {
-                        id: 'T_1',
-                        defaultLanguageCode: LanguageCode.zh,
-                    },
-                });
-            }, 'Language "zh" is not available. First enable it via GlobalSettings and try again.'),
-        );
+        it('returns error result if languageCode not in availableLanguages', async () => {
+            const { updateChannel } = await adminClient.query<
+                UpdateChannel.Mutation,
+                UpdateChannel.Variables
+            >(UPDATE_CHANNEL, {
+                input: {
+                    id: 'T_1',
+                    defaultLanguageCode: LanguageCode.zh,
+                },
+            });
+            channelGuard.assertErrorResult(updateChannel);
+
+            expect(updateChannel.message).toBe(
+                'Language "zh" is not available. First enable it via GlobalSettings and try again',
+            );
+            expect(updateChannel.errorCode).toBe(ErrorCode.LANGUAGE_NOT_AVAILABLE_ERROR);
+            expect(updateChannel.languageCode).toBe('zh');
+        });
 
         it('allows setting to an available language', async () => {
-            await adminClient.query<UpdateGlobalSettings.Mutation, UpdateGlobalSettings.Variables>(
-                UPDATE_GLOBAL_SETTINGS,
+            await adminClient.query<UpdateGlobalLanguages.Mutation, UpdateGlobalLanguages.Variables>(
+                UPDATE_GLOBAL_LANGUAGES,
                 {
                     input: {
                         availableLanguages: [LanguageCode.en, LanguageCode.zh],
@@ -390,20 +433,6 @@ describe('Channels', () => {
 
             expect(updateChannel.defaultLanguageCode).toBe(LanguageCode.zh);
         });
-
-        it(
-            'attempting to remove availableLanguage when used by a Channel throws',
-            assertThrowsWithMessage(async () => {
-                await adminClient.query<UpdateGlobalSettings.Mutation, UpdateGlobalSettings.Variables>(
-                    UPDATE_GLOBAL_SETTINGS,
-                    {
-                        input: {
-                            availableLanguages: [LanguageCode.en],
-                        },
-                    },
-                );
-            }, 'Cannot remove make language "zh" unavailable as it is used as the defaultLanguage by the channel "__default_channel__"'),
-        );
     });
 
     it('deleteChannel', async () => {
@@ -461,11 +490,13 @@ const DELETE_CHANNEL = gql`
     }
 `;
 
-const UPDATE_GLOBAL_SETTINGS = gql`
-    mutation UpdateGlobalSettings($input: UpdateGlobalSettingsInput!) {
+const UPDATE_GLOBAL_LANGUAGES = gql`
+    mutation UpdateGlobalLanguages($input: UpdateGlobalSettingsInput!) {
         updateGlobalSettings(input: $input) {
-            id
-            availableLanguages
+            ... on GlobalSettings {
+                id
+                availableLanguages
+            }
         }
     }
 `;