merge changes

.github/PULL_REQUEST_TEMPLATE.md

@@ -21,6 +21,8 @@ greatly reduce the amount of work needed to review your work. -->
 1. [ ] Data-test are added for new elements.
 1. [ ] Type definitions are up to date.
 1. [ ] Changes are mentioned in the changelog.
+1. [ ] The changes are tested in different browsers (Chrome, Firefox, Safari).
+1. [ ] The changes are tested in light and dark mode.
 
 ### Test environment config
 

.github/workflows/test-env-deploy.yml

@@ -88,7 +88,7 @@ jobs:
           aws s3 sync ./build/storybook s3://${{ secrets.AWS_TEST_DEPLOYMENT_BUCKET }}/${{ steps.set-domain.outputs.domain }}/storybook
 
       - name: Invalidate cache
-        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_TEST_CF_DIST_ID }} --paths "/${{ env.domain }}/*"
+        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_TEST_CF_DIST_ID }} --paths "/${{ steps.set-domain.outputs.domain }}/*"
 
       - name: Update deployment status
         uses: bobheadxi/deployments@v0.4.2

.github/workflows/test.yml

@@ -90,11 +90,12 @@ jobs:
         env:
           API_URI: ${{ steps.api_uri.outputs.custom_api_uri || secrets.API_URI }}
           APP_MOUNT_URI: ${{ secrets.APP_MOUNT_URI }}
+          CYPRESS_baseUrl: ${{ secrets.CYPRESS_BASEURL }}
           CYPRESS_USER_NAME: ${{ secrets.CYPRESS_USER_NAME }}
           CYPRESS_USER_PASSWORD: ${{ secrets.CYPRESS_USER_PASSWORD }}
         with:
           build: npm run build
-          start: npx http-server -a localhost -p 9000 build/dashboard
+          start: npx local-web-server --spa index.html
           wait-on: http://localhost:9000/
           wait-on-timeout: 120
       - uses: actions/upload-artifact@v1

CHANGELOG.md

@@ -18,6 +18,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add product reference attributes - #948 by @orzechdev
 - Drop descriptionJson and contentJson fields - #950 by @jwm0
 - Add error tracking with Sentry adapter - #956 by @jwm0
+- Add OAuth2 login with OpenID support - #963 by @orzechdev
 
 # 2.11.1
 

cypress.json

@@ -1,5 +1,5 @@
 {
-  "baseUrl": "http://localhost:9000",
+  "baseUrl": "http://localhost:9000/dashboard/",
   "defaultCommandTimeout": 15000,
   "requestTimeout": 15000,
   "viewportWidth": 1400,

cypress/elements/account/left-menu/left-menu-selectors.js

@@ -1,4 +1,7 @@
-/* eslint-disable sort-keys */
 export const LEFT_MENU_SELECTORS = {
-  catalog: "[data-test-id='catalogue']"
+  catalog: "[data-test='menu-item-label'][data-test-id='catalogue']",
+  configuration: "[data-test='menu-item-label'][data-test-id='configure']",
+  home: "[data-test='menu-item-label'][data-test-id='home']",
+  orders: "[data-test='menu-item-label'][data-test-id=orders']",
+  products: "[data-test='submenu-item-label'][data-test-id='products']"
 };

cypress/elements/catalog/product-selectors.js

@@ -27,5 +27,6 @@ export const PRODUCTS_SELECTORS = {
   availableForPurchaseRadioButtons: "[name*='isAvailableForPurchase']",
   radioButtonsValueTrue: "[value:'true']",
   radioButtonsValueFalse: "[value:'false']",
-  visibleInListingsButton: "[name*='visibleInListings']"
+  visibleInListingsButton: "[name*='visibleInListings']",
+  emptyProductRow: "[class*='Skeleton']"
 };

cypress/elements/channels/add-channel-form-selectors.js

@@ -0,0 +1,12 @@
+export const ADD_CHANNEL_FORM_SELECTORS = {
+  channelName: "[name='name']",
+  slug: "[name='slug']",
+  currency: "[data-test-id='channel-currency-select-input']",
+  currencyOptions: "[data-test='singleautocomplete-select-option']",
+  saveButton: "[data-test='button-bar-confirm']",
+  backToChannelsList: "[data-test-id='app-header-back-button']",
+  currencyValidationMessage: "[data-testid='currency-text-input-helper-text']",
+  slugValidationMessage: "[data-testid='slug-text-input-helper-text']",
+  currencyAutocompleteDropdown:
+    "[data-test='singleautocomplete-select-option'][data-test-type='custom']"
+};

cypress/elements/channels/channel-form-selectors.js

@@ -0,0 +1,5 @@
+export const CHANNEL_FORM_SELECTORS = {
+  channelSelect: "[id='mui-component-select-channels']",
+  channelOption: "[data-test='selectFieldOption']",
+  confirmButton: "[data-test='submit']"
+};

cypress/elements/channels/channels-selectors.js

@@ -0,0 +1,5 @@
+export const CHANNELS_SELECTORS = {
+  createChannelButton: "[data-test='add-channel']",
+  channelsTable: "[class='MuiTableBody-root']",
+  channelName: "[data-test='name']"
+};

cypress/elements/configuration/configuration-selectors.js

@@ -0,0 +1,4 @@
+/* eslint-disable sort-keys */
+export const CONFIGURATION_SELECTORS = {
+  channels: "[data-testid='channels']"
+};

cypress/elements/header/header-selectors.js

@@ -0,0 +1,4 @@
+export const HEADER_SELECTORS = {
+  channelSelect: "[data-test-id='app-channel-select']",
+  channelSelectList: "[class*='MuiMenu-paper']"
+};

cypress/elements/orders/draft-order-selectors.js

@@ -0,0 +1,3 @@
+export const DRAFT_ORDER_SELECTORS = {
+  addProducts: "[data-test-id='add-products-button']"
+};

cypress/elements/orders/orders-selectors.js

@@ -0,0 +1,4 @@
+export const ORDERS_SELECTORS = {
+  orders: "[data-test='submenu-item-label'][data-test-id='orders']",
+  createOrder: "[data-test-id='create-order-button']"
+};

cypress/integration/channels.js

@@ -0,0 +1,139 @@
+// <reference types="cypress" />
+import faker from "faker";
+
+import Channels from "../apiRequests/Channels";
+import { LEFT_MENU_SELECTORS } from "../elements/account/left-menu/left-menu-selectors";
+import { PRODUCTS_SELECTORS } from "../elements/catalog/product-selectors";
+import { ADD_CHANNEL_FORM_SELECTORS } from "../elements/channels/add-channel-form-selectors";
+import { CHANNEL_FORM_SELECTORS } from "../elements/channels/channel-form-selectors";
+import { CHANNELS_SELECTORS } from "../elements/channels/channels-selectors";
+import { CONFIGURATION_SELECTORS } from "../elements/configuration/configuration-selectors";
+import { HEADER_SELECTORS } from "../elements/header/header-selectors";
+import { DRAFT_ORDER_SELECTORS } from "../elements/orders/draft-order-selectors";
+import { ORDERS_SELECTORS } from "../elements/orders/orders-selectors";
+import { BUTTON_SELECTORS } from "../elements/shared/button-selectors";
+import ChannelsSteps from "../steps/channelsSteps";
+import { urlList } from "../url/urlList";
+
+describe("Channels", () => {
+  const channelStartsWith = "Cypress:";
+  const currency = "PLN";
+  const channels = new Channels();
+  const channelsSteps = new ChannelsSteps();
+
+  before(() => {
+    cy.clearSessionData().loginUserViaRequest();
+    channels.deleteTestChannels(channelStartsWith);
+  });
+
+  beforeEach(() => {
+    cy.clearSessionData().loginUserViaRequest();
+  });
+
+  it("should navigate to channels page", () => {
+    cy.visit(urlList.homePage)
+      .get(LEFT_MENU_SELECTORS.configuration)
+      .click()
+      .get(CONFIGURATION_SELECTORS.channels)
+      .click()
+      .location("pathname")
+      .should("contain", "channels");
+  });
+
+  it("should create new channel", () => {
+    const randomChannel = `${channelStartsWith} ${faker.random.number()}`;
+    cy.visit(urlList.channels).waitForGraph("Channels");
+    channelsSteps.createChannelByView(randomChannel, currency);
+    // New channel should be visible in channels list
+    cy.waitForGraph("Channel")
+      .get(ADD_CHANNEL_FORM_SELECTORS.backToChannelsList)
+      .click()
+      .get(CHANNELS_SELECTORS.channelsTable)
+      .contains(randomChannel);
+
+    // new channel should be visible in channel selector
+    cy.visit(urlList.homePage)
+      .get(HEADER_SELECTORS.channelSelect)
+      .click()
+      .get(HEADER_SELECTORS.channelSelectList)
+      .contains(randomChannel)
+      .click();
+
+    // new channel should be visible at product availability form
+    cy.visit(urlList.products).waitForGraph("InitialProductFilterData");
+    cy.get(PRODUCTS_SELECTORS.productsList)
+      .first()
+      .click()
+      .get(PRODUCTS_SELECTORS.availableManageButton)
+      .click()
+      .get(PRODUCTS_SELECTORS.channelsAvailabilityForm)
+      .contains(randomChannel);
+  });
+
+  it("should validate slug name", () => {
+    const randomChannel = `${channelStartsWith} ${faker.random.number()}`;
+    channels.createChannel(false, randomChannel, randomChannel, currency);
+    cy.visit(urlList.channels);
+    channelsSteps.createChannelByView(randomChannel, currency);
+    cy.get(ADD_CHANNEL_FORM_SELECTORS.slugValidationMessage).should(
+      "be.visible"
+    );
+  });
+
+  it("should validate currency", () => {
+    const randomChannel = `${channelStartsWith} ${faker.random.number()}`;
+    cy.visit(urlList.channels);
+    channelsSteps.createChannelByView(
+      randomChannel,
+      currency,
+      "notExistingCurrency"
+    );
+    cy.get(ADD_CHANNEL_FORM_SELECTORS.currencyValidationMessage).should(
+      "be.visible"
+    );
+  });
+
+  it("should delete channel", () => {
+    const randomChannelToDelete = `${channelStartsWith} ${faker.random.number()}`;
+    channels.createChannel(
+      false,
+      randomChannelToDelete,
+      randomChannelToDelete,
+      currency
+    );
+    cy.visit(urlList.channels).waitForGraph("Channels");
+    cy.get(CHANNELS_SELECTORS.channelName)
+      .contains(randomChannelToDelete)
+      .parentsUntil(CHANNELS_SELECTORS.channelsTable)
+      .find("button")
+      .click()
+      .get(BUTTON_SELECTORS.submit)
+      .click()
+      .waitForGraph("Channels");
+    cy.get(CHANNELS_SELECTORS.channelName)
+      .contains(randomChannelToDelete)
+      .should("not.exist");
+  });
+
+  it("should not be possible to add products to order with inactive channel", () => {
+    const randomChannel = `${channelStartsWith} ${faker.random.number()}`;
+    channels.createChannel(false, randomChannel, randomChannel, currency);
+    cy.visit(urlList.orders)
+      .get(ORDERS_SELECTORS.createOrder)
+      .click()
+      .get(CHANNEL_FORM_SELECTORS.channelSelect)
+      .click()
+      .get(CHANNEL_FORM_SELECTORS.channelOption)
+      .contains(randomChannel)
+      .click()
+      .get(CHANNEL_FORM_SELECTORS.confirmButton)
+      .click();
+    cy.location()
+      .should(loc => {
+        const urlRegex = new RegExp(`${urlList.orders}.+`, "g");
+        expect(loc.pathname).to.match(urlRegex);
+      })
+      .get(DRAFT_ORDER_SELECTORS.addProducts)
+      .should("not.exist");
+  });
+});

cypress/integration/login_form.js

@@ -1,19 +1,20 @@
-import { LOGIN_SELECTORS } from "../elements/account/login-selectors";
-
 // <reference types="cypress" />
+import { LOGIN_SELECTORS } from "../elements/account/login-selectors";
+import { urlList } from "../url/urlList";
+
 describe("User authorization", () => {
   beforeEach(() => {
     cy.clearSessionData();
   });
 
   it("should successfully log in an user", () => {
-    cy.visit("/");
+    cy.visit(urlList.homePage);
     cy.loginUser();
     cy.get(LOGIN_SELECTORS.welcomePage);
   });
 
   it("should fail for wrong password", () => {
-    cy.visit("/")
+    cy.visit(urlList.homePage)
       .get(LOGIN_SELECTORS.emailAddressInput)
       .type("admin@example.com")
       .get(LOGIN_SELECTORS.emailPasswordInput)
@@ -27,7 +28,7 @@ describe("User authorization", () => {
     cy.window().then(win => {
       win.sessionStorage.clear();
     });
-    cy.visit("/");
+    cy.visit(urlList.homePage);
     cy.loginUser();
     cy.get(LOGIN_SELECTORS.userMenu)
       .click()

cypress/integration/products.js

@@ -0,0 +1,54 @@
+// <reference types="cypress" />
+import { LEFT_MENU_SELECTORS } from "../elements/account/left-menu/left-menu-selectors";
+import { PRODUCTS_SELECTORS } from "../elements/catalog/product-selectors";
+import { urlList } from "../url/urlList";
+
+describe("Products", () => {
+  beforeEach(() => {
+    cy.clearSessionData().loginUserViaRequest();
+  });
+
+  it("should navigate to channels page", () => {
+    cy.visit(urlList.homePage)
+      .get(LEFT_MENU_SELECTORS.catalog)
+      .click()
+      .get(LEFT_MENU_SELECTORS.products)
+      .click()
+      .location("pathname")
+      .should("contain", "/products");
+  });
+
+  it("should add new visible product", () => {
+    cy.visit(urlList.products)
+      .get(PRODUCTS_SELECTORS.createProductBtn)
+      .click()
+      .get(PRODUCTS_SELECTORS.productNameInput)
+      .click()
+      .type("Visible test product")
+      .get(PRODUCTS_SELECTORS.productTypeInput)
+      .click()
+      .get(PRODUCTS_SELECTORS.autocompleteDropdown) // trying to fill autocomplete before dropdown will cause error
+      .get(PRODUCTS_SELECTORS.productTypeInput)
+      .click()
+      .type("Cushion")
+      .get(PRODUCTS_SELECTORS.categoryItem)
+      .should("have.length", 1)
+      .get(PRODUCTS_SELECTORS.firstCategoryItem)
+      .click()
+      .get(PRODUCTS_SELECTORS.categoryInput)
+      .click()
+      .get(PRODUCTS_SELECTORS.categoryItem)
+      .first()
+      .click()
+      .get(PRODUCTS_SELECTORS.channelAvailabilityItem)
+      .first()
+      .click()
+      .get(PRODUCTS_SELECTORS.visibleRadioBtn)
+      .first()
+      .click()
+      .get(PRODUCTS_SELECTORS.saveBtn)
+      .click()
+      .get(PRODUCTS_SELECTORS.confirmationMsg)
+      .contains("Product created");
+  });
+});

cypress/integration/warehouse.js

@@ -1,11 +1,13 @@
 // <reference types="cypress" />
+import { urlList } from "../url/urlList";
+
 describe("Warehouse settings", () => {
   beforeEach(() => {
     cy.clearSessionData();
   });
 
   xit("Warehouse section visible in the configuration", () => {
-    cy.visit("/configuration/")
+    cy.visit(urlList.configuration)
       .loginUser()
       .get("[data-test-id=warehouses][data-test=settingsSubsection]")
       .click();
@@ -13,7 +15,7 @@ describe("Warehouse settings", () => {
   });
 
   xit("Editing warehouse is available", () => {
-    cy.visit(`/warehouses`)
+    cy.visit(urlList.warehouses)
       .loginUser()
       .get("[data-test=editButton]")
       .first()

cypress/plugins/index.js

@@ -16,7 +16,13 @@
  * @type {Cypress.PluginConfig}
  */
 module.exports = (on, config) => {
+  // make env variables visible for cypress
   config.env.API_URI = process.env.API_URI;
+  config.env.APP_MOUNT_URI = process.env.APP_MOUNT_URI;
 
+  on("before:browser:launch", (browser = {}, launchOptions) => {
+    launchOptions.args.push("--proxy-bypass-list=<-loopback>");
+    return launchOptions;
+  });
   return config;
 };

cypress/steps/channelsSteps.js

@@ -0,0 +1,26 @@
+import { ADD_CHANNEL_FORM_SELECTORS } from "../elements/channels/add-channel-form-selectors";
+import { CHANNELS_SELECTORS } from "../elements/channels/channels-selectors";
+
+class ChannelsSteps {
+  createChannelByView(name, currency, otherCurrency, slug = name) {
+    cy.get(CHANNELS_SELECTORS.createChannelButton)
+      .click()
+      .get(ADD_CHANNEL_FORM_SELECTORS.channelName)
+      .type(name)
+      .get(ADD_CHANNEL_FORM_SELECTORS.slug)
+      .type(slug)
+      .get(ADD_CHANNEL_FORM_SELECTORS.currency)
+      .click();
+    if (!otherCurrency) {
+      cy.get(ADD_CHANNEL_FORM_SELECTORS.currency).type(currency);
+      cy.get(`[data-test-value=${currency}]`).click();
+    } else {
+      cy.get(ADD_CHANNEL_FORM_SELECTORS.currency)
+        .type(otherCurrency)
+        .get(ADD_CHANNEL_FORM_SELECTORS.currencyAutocompleteDropdown)
+        .click();
+    }
+    cy.get(ADD_CHANNEL_FORM_SELECTORS.saveButton).click();
+  }
+}
+export default ChannelsSteps;

cypress/support/index.js

@@ -1,42 +1,27 @@
 import "./user";
 import "./frontShop";
 
+import { urlList } from "../url/urlList";
+
 Cypress.Commands.add("clearSessionData", () => {
   // Because of known cypress bug, not all local storage data are cleared.
   // Here is workaround to ensure tests have no side effects.
   // Suggested usage:
-
   // beforeEach(() => {
   //   cy.clearSessionData();
   // });
 
   cy.clearCookies();
   cy.clearLocalStorage();
-  cy.visit("/", {
+  cy.visit(urlList.homePage, {
     onBeforeLoad: win => {
       win.sessionStorage.clear();
     }
   });
 });
 
-Cypress.Commands.add("sendRequestWithQuery", query =>
-  cy.request({
-    method: "POST",
-    body: {
-      method: "POST",
-      url: Cypress.env("API_URI"),
-      query
-    },
-    headers: {
-      Authorization: `JWT ${window.sessionStorage.getItem("auth")}`
-    },
-    url: Cypress.env("API_URI")
-  })
-);
-
 Cypress.Commands.add("waitForGraph", operationName => {
-  const GRAPH_URL = "/graphql";
+  cy.intercept("POST", Cypress.env("API_URI"), req => {
-  cy.intercept("POST", GRAPH_URL, req => {
     req.statusCode = 200;
     const requestBody = req.body;
     if (Array.isArray(requestBody)) {
@@ -53,3 +38,18 @@ Cypress.Commands.add("waitForGraph", operationName => {
   });
   cy.wait(`@${operationName}`);
 });
+
+Cypress.Commands.add("sendRequestWithQuery", query =>
+  cy.request({
+    body: {
+      method: "POST",
+      query,
+      url: urlList.apiUri
+    },
+    headers: {
+      Authorization: `JWT ${window.sessionStorage.getItem("auth")}`
+    },
+    method: "POST",
+    url: urlList.apiUri
+  })
+);

cypress/support/user/index.js

@@ -1,5 +1,5 @@
-/* eslint-disable sort-keys */
 import { LOGIN_SELECTORS } from "../../elements/account/login-selectors";
+import { urlList } from "../../url/urlList";
 
 Cypress.Commands.add("loginUser", () =>
   cy
@@ -31,16 +31,16 @@ Cypress.Commands.add("loginUserViaRequest", () => {
 
   return cy
     .request({
-      method: "POST",
-      url: Cypress.env("API_URI"),
       body: {
         operationName: "TokenAuth",
+        query: logInMutationQuery,
         variables: {
           email: Cypress.env("USER_NAME"),
           password: Cypress.env("USER_PASSWORD")
-        },
-        query: logInMutationQuery
         }
+      },
+      method: "POST",
+      url: urlList.apiUri
     })
     .then(resp => {
       window.sessionStorage.setItem("auth", resp.body.data.tokenCreate.token);

cypress/url/urlList.js

@@ -0,0 +1,9 @@
+export const urlList = {
+  apiUri: Cypress.env("API_URI"),
+  channels: "channels/",
+  configuration: "configuration/",
+  homePage: "/",
+  orders: "orders/",
+  products: "products/",
+  warehouses: "warehouses/"
+};

locale/defaultMessages.json

@@ -1016,12 +1016,23 @@
   "src_dot_auth_dot_components_dot_LoginPage_dot_2237029987": {
     "string": "Password"
   },
+  "src_dot_auth_dot_components_dot_LoginPage_dot_2981302356": {
+    "context": "link",
+    "string": "Use this link to recover it"
+  },
   "src_dot_auth_dot_components_dot_LoginPage_dot_3476994590": {
     "string": "Sorry, your username and/or password are incorrect. Please try again."
   },
-  "src_dot_auth_dot_components_dot_LoginPage_dot_4028609483": {
+  "src_dot_auth_dot_components_dot_LoginPage_dot_3762459576": {
-    "context": "button",
+    "context": "description",
-    "string": "Reset your password"
+    "string": "or login using"
+  },
+  "src_dot_auth_dot_components_dot_LoginPage_dot_534894384": {
+    "string": "Sorry, login went wrong. Please try again."
+  },
+  "src_dot_auth_dot_components_dot_LoginPage_dot_599516345": {
+    "context": "description",
+    "string": "Forgot password? {resetPasswordLink}"
   },
   "src_dot_auth_dot_components_dot_NewPasswordPage_dot_1254879564": {
     "string": "New Password"

lws.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  directory: "build/dashboard/",
+  port: 9000
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "saleor-dashboard",
-  "version": "3.0.0-a.0",
+  "version": "3.0.0-a.5",
   "main": "src/index.tsx",
   "repository": {
     "type": "git",
@@ -42,7 +42,9 @@
     "downshift": "^1.31.16",
     "editorjs-inline-tool": "^0.4.0",
     "editorjs-undo": "^0.1.4",
+    "faker": "^5.1.0",
     "fast-array-diff": "^0.2.0",
+    "fsevents": "^1.2.9",
     "fuzzaldrin": "^2.1.0",
     "graphql": "^14.4.2",
     "graphql-tag": "^2.11.0",
@@ -130,7 +132,7 @@
     "codecov": "^3.7.1",
     "core-js": "^3.7.0",
     "cross-env": "^6.0.3",
-    "cypress": "^4.9.0",
+    "cypress": "^6.4.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",

schema.graphql

@@ -1943,6 +1943,49 @@ enum ExportScope {
   FILTER
 }
 
+type ExternalAuthentication {
+  id: String!
+  name: String
+}
+
+type ExternalAuthenticationUrl {
+  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
+  authenticationData: JSONString
+  accountErrors: [AccountError!]!
+}
+
+type ExternalLogout {
+  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
+  logoutData: JSONString
+  accountErrors: [AccountError!]!
+}
+
+type ExternalObtainAccessTokens {
+  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
+  token: String
+  refreshToken: String
+  csrfToken: String
+  user: User
+  accountErrors: [AccountError!]!
+}
+
+type ExternalRefresh {
+  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
+  token: String
+  refreshToken: String
+  csrfToken: String
+  user: User
+  accountErrors: [AccountError!]!
+}
+
+type ExternalVerify {
+  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
+  user: User
+  isValid: Boolean!
+  verifyData: JSONString
+  accountErrors: [AccountError!]!
+}
+
 type File {
   url: String!
   contentType: String
@@ -2765,6 +2808,11 @@ type Mutation {
   tokenRefresh(csrfToken: String, refreshToken: String): RefreshToken
   tokenVerify(token: String!): VerifyToken
   tokensDeactivateAll: DeactivateAllUserTokens
+  externalAuthenticationUrl(input: JSONString!, pluginId: String!): ExternalAuthenticationUrl
+  externalObtainAccessTokens(input: JSONString!, pluginId: String!): ExternalObtainAccessTokens
+  externalRefresh(input: JSONString!, pluginId: String!): ExternalRefresh
+  externalLogout(input: JSONString!, pluginId: String!): ExternalLogout
+  externalVerify(input: JSONString!, pluginId: String!): ExternalVerify
   requestPasswordReset(email: String!, redirectUrl: String!): RequestPasswordReset
   confirmAccount(email: String!, token: String!): ConfirmAccount
   setPassword(email: String!, password: String!, token: String!): SetPassword
@@ -4906,6 +4954,7 @@ input ShippingZoneUpdateInput {
 
 type Shop {
   availablePaymentGateways(currency: String): [PaymentGateway!]!
+  availableExternalAuthentications: [ExternalAuthentication!]!
   availableShippingMethods(channel: String!, address: AddressInput): [ShippingMethod]
   geolocalization: Geolocalization
   countries(languageCode: LanguageCodeEnum): [CountryDisplay!]!

src/auth/AuthProvider.test.ts

@@ -2,7 +2,7 @@ import setupApi from "@test/api";
 import { act, renderHook } from "@testing-library/react-hooks";
 import ApolloClient from "apollo-client";
 
-import { useAuthProvider } from "./AuthProvider";
+import { useAuthProvider } from "./hooks/useAuthProvider";
 import { getTokens, setAuthToken } from "./utils";
 
 const apolloClient = setupApi();
@@ -14,7 +14,7 @@ function renderAuthProvider(apolloClient: ApolloClient<any>) {
   const notify = jest.fn();
 
   const { result } = renderHook(() =>
-    useAuthProvider(intl as any, notify, apolloClient)
+    useAuthProvider({ apolloClient, intl: intl as any, notify })
   );
 
   return result;
@@ -43,7 +43,7 @@ describe("User", () => {
     await act(() =>
       hook.current.login(adminCredentials.email, adminCredentials.password)
     );
-    expect(hook.current.userContext.email).toBe(adminCredentials.email);
+    expect(hook.current.user.email).toBe(adminCredentials.email);
     adminCredentials.token = getTokens().auth;
 
     done();
@@ -55,7 +55,7 @@ describe("User", () => {
     await act(() =>
       hook.current.login(adminCredentials.email, "NotAValidPassword123!")
     );
-    expect(hook.current.userContext).toBe(null);
+    expect(hook.current.user).toBe(null);
 
     done();
   });
@@ -69,7 +69,7 @@ describe("User", () => {
         nonStaffUserCredentials.password
       )
     );
-    expect(hook.current.userContext).toBe(undefined);
+    expect(hook.current.user).toBe(undefined);
 
     done();
   });
@@ -79,7 +79,7 @@ describe("User", () => {
     const hook = renderAuthProvider(apolloClient);
 
     await act(() => hook.current.autologinPromise.current);
-    expect(hook.current.userContext.email).toBe(adminCredentials.email);
+    expect(hook.current.user.email).toBe(adminCredentials.email);
 
     done();
   });
@@ -89,7 +89,7 @@ describe("User", () => {
     const hook = renderAuthProvider(apolloClient);
 
     await act(() => hook.current.autologinPromise.current);
-    expect(hook.current.userContext).toBe(undefined);
+    expect(hook.current.user).toBe(undefined);
 
     done();
   });

src/auth/AuthProvider.tsx

@@ -1,197 +1,11 @@
-import { IMessageContext } from "@saleor/components/messages";
-import { DEMO_MODE } from "@saleor/config";
-import { User } from "@saleor/fragments/types/User";
 import useNotifier from "@saleor/hooks/useNotifier";
-import { commonMessages } from "@saleor/intl";
+import React, { useContext } from "react";
-import { getMutationStatus } from "@saleor/misc";
+import { useApolloClient } from "react-apollo";
-import errorTracker from "@saleor/services/errorTracking";
+import { useIntl } from "react-intl";
-import {
-  isSupported as isCredentialsManagementAPISupported,
-  login as loginWithCredentialsManagementAPI,
-  saveCredentials
-} from "@saleor/utils/credentialsManagement";
-import ApolloClient from "apollo-client";
-import React, { useContext, useEffect, useRef, useState } from "react";
-import { useApolloClient, useMutation } from "react-apollo";
-import { IntlShape, useIntl } from "react-intl";
 
 import { UserContext } from "./";
-import {
+import { useAuthProvider } from "./hooks/useAuthProvider";
-  tokenAuthMutation,
+import { getTokens } from "./utils";
-  tokenRefreshMutation,
-  tokenVerifyMutation
-} from "./mutations";
-import { RefreshToken, RefreshTokenVariables } from "./types/RefreshToken";
-import { TokenAuth, TokenAuthVariables } from "./types/TokenAuth";
-import { VerifyToken, VerifyTokenVariables } from "./types/VerifyToken";
-import {
-  displayDemoMessage,
-  getTokens,
-  removeTokens,
-  setAuthToken,
-  setTokens
-} from "./utils";
-
-const persistToken = false;
-
-export function useAuthProvider(
-  intl: IntlShape,
-  notify: IMessageContext,
-  apolloClient: ApolloClient<any>
-) {
-  const [userContext, setUserContext] = useState<undefined | User>(undefined);
-  const autologinPromise = useRef<Promise<any>>();
-  const refreshPromise = useRef<Promise<boolean>>();
-
-  useEffect(() => {
-    const token = getTokens().auth;
-    if (!!token && !userContext) {
-      autologinPromise.current = tokenVerify({ variables: { token } });
-    } else {
-      autologinPromise.current = loginWithCredentialsManagementAPI(login);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (userContext) {
-      const { id, email, firstName, lastName } = userContext;
-      errorTracker.setUserData({
-        email,
-        id,
-        username: `${firstName} ${lastName}`
-      });
-
-      if (!userContext.isStaff) {
-        logout();
-        notify({
-          status: "error",
-          text: intl.formatMessage(commonMessages.unauthorizedDashboardAccess),
-          title: intl.formatMessage(commonMessages.insufficientPermissions)
-        });
-      }
-    }
-  }, [userContext]);
-
-  const logout = () => {
-    setUserContext(undefined);
-    if (isCredentialsManagementAPISupported) {
-      navigator.credentials.preventSilentAccess();
-    }
-    removeTokens();
-  };
-
-  const [tokenAuth, tokenAuthResult] = useMutation<
-    TokenAuth,
-    TokenAuthVariables
-  >(tokenAuthMutation, {
-    client: apolloClient,
-    onCompleted: ({ tokenCreate }) => {
-      if (tokenCreate.errors.length > 0) {
-        logout();
-      }
-
-      const user = tokenCreate.user;
-
-      // FIXME: Now we set state also when auth fails and returned user is
-      // `null`, because the LoginView uses this `null` to display error.
-      setUserContext(user);
-      if (user) {
-        setTokens(tokenCreate.token, tokenCreate.csrfToken, persistToken);
-      }
-    },
-    onError: logout
-  });
-  const [tokenRefresh] = useMutation<RefreshToken, RefreshTokenVariables>(
-    tokenRefreshMutation,
-    {
-      client: apolloClient,
-      onError: logout
-    }
-  );
-  const [tokenVerify, tokenVerifyResult] = useMutation<
-    VerifyToken,
-    VerifyTokenVariables
-  >(tokenVerifyMutation, {
-    client: apolloClient,
-    onCompleted: result => {
-      if (result.tokenVerify === null) {
-        logout();
-      } else {
-        const user = result.tokenVerify?.user;
-
-        if (!!user) {
-          setUserContext(user);
-        }
-      }
-    },
-    onError: logout
-  });
-
-  const tokenAuthOpts = {
-    ...tokenAuthResult,
-    status: getMutationStatus(tokenAuthResult)
-  };
-  const tokenVerifyOpts = {
-    ...tokenVerifyResult,
-    status: getMutationStatus(tokenVerifyResult)
-  };
-
-  const onLogin = () => {
-    if (DEMO_MODE) {
-      displayDemoMessage(intl, notify);
-    }
-  };
-
-  const login = async (email: string, password: string) => {
-    const result = await tokenAuth({ variables: { email, password } });
-
-    if (result && !result.data.tokenCreate.errors.length) {
-      if (!!onLogin) {
-        onLogin();
-      }
-      saveCredentials(result.data.tokenCreate.user, password);
-
-      return result.data.tokenCreate.user;
-    }
-
-    return null;
-  };
-
-  const loginByToken = (auth: string, refresh: string, user: User) => {
-    setUserContext(user);
-    setTokens(auth, refresh, persistToken);
-  };
-
-  const refreshToken = (): Promise<boolean> => {
-    if (!!refreshPromise.current) {
-      return refreshPromise.current;
-    }
-
-    return new Promise(resolve => {
-      const token = getTokens().refresh;
-
-      return tokenRefresh({ variables: { token } }).then(refreshData => {
-        if (!!refreshData.data.tokenRefresh?.token) {
-          setAuthToken(refreshData.data.tokenRefresh.token, persistToken);
-          return resolve(true);
-        }
-
-        return resolve(false);
-      });
-    });
-  };
-
-  return {
-    autologinPromise,
-    login,
-    loginByToken,
-    logout,
-    refreshToken,
-    tokenAuthOpts,
-    tokenVerifyOpts,
-    userContext
-  };
-}
 
 interface AuthProviderProps {
   children: React.ReactNode;
@@ -202,30 +16,10 @@ const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   const intl = useIntl();
   const notify = useNotifier();
 
-  const {
+  const authProvider = useAuthProvider({ apolloClient, intl, notify });
-    login,
-    loginByToken,
-    logout,
-    tokenAuthOpts,
-    refreshToken,
-    tokenVerifyOpts,
-    userContext
-  } = useAuthProvider(intl, notify, apolloClient);
 
   return (
-    <UserContext.Provider
+    <UserContext.Provider value={authProvider}>{children}</UserContext.Provider>
-      value={{
-        login,
-        loginByToken,
-        logout,
-        tokenAuthLoading: tokenAuthOpts.loading,
-        tokenRefresh: refreshToken,
-        tokenVerifyLoading: tokenVerifyOpts.loading,
-        user: userContext
-      }}
-    >
-      {children}
-    </UserContext.Provider>
   );
 };
 

src/auth/components/LoginLoading/LoginLoading.stories.tsx

@@ -1,8 +1,8 @@
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import LoginLoading from "../../../auth/components/LoginLoading";
+import LoginLoading from ".";
-import Decorator from "../../Decorator";
 
 storiesOf("Views / Authentication / Verifying remembered user", module)
   .addDecorator(Decorator)

src/auth/components/LoginPage/LoginPage.stories.tsx

@@ -1,14 +1,24 @@
 import { Omit } from "@material-ui/core";
+import CardDecorator from "@saleor/storybook/CardDecorator";
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import LoginPage, { LoginCardProps } from "../../../auth/components/LoginPage";
-import CardDecorator from "../../CardDecorator";
-import Decorator from "../../Decorator";
 
 const props: Omit<LoginCardProps, "classes"> = {
-  disableLoginButton: true,
+  disabled: false,
   error: false,
+  externalAuthentications: [
+    {
+      __typename: "ExternalAuthentication",
+      id: "auth.plugin.example",
+      name: "Example auth plugin"
+    }
+  ],
+  externalError: false,
+  loading: false,
+  onExternalAuthentication: () => undefined,
   onPasswordRecovery: undefined,
   onSubmit: () => undefined
 };
@@ -18,4 +28,5 @@ storiesOf("Views / Authentication / Log in", module)
   .addDecorator(Decorator)
   .add("default", () => <LoginPage {...props} />)
   .add("error", () => <LoginPage {...props} error={true} />)
-  .add("loading", () => <LoginPage {...props} disableLoginButton={true} />);
+  .add("disabled", () => <LoginPage {...props} disabled={true} />)
+  .add("loading", () => <LoginPage {...props} loading={true} />);

src/auth/components/LoginPage/LoginPage.tsx

@@ -1,18 +1,17 @@
 import Button from "@material-ui/core/Button";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Divider from "@material-ui/core/Divider";
 import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
-import Form from "@saleor/components/Form";
+import { AvailableExternalAuthentications_shop_availableExternalAuthentications } from "@saleor/auth/types/AvailableExternalAuthentications";
 import { FormSpacer } from "@saleor/components/FormSpacer";
-import { DEMO_MODE } from "@saleor/config";
+import { SubmitPromise } from "@saleor/hooks/useForm";
 import { commonMessages } from "@saleor/intl";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-export interface FormData {
+import LoginForm, { LoginFormData } from "./form";
-  email: string;
-  password: string;
-}
 
 const useStyles = makeStyles(
   theme => ({
@@ -23,7 +22,13 @@ const useStyles = makeStyles(
     link: {
       color: theme.palette.primary.main,
       cursor: "pointer",
-      textAlign: "center"
+      textDecoration: "underline"
+    },
+    loading: {
+      alignItems: "center",
+      display: "flex",
+      height: "100vh",
+      justifyContent: "center"
     },
     loginButton: {
       width: 140
@@ -43,27 +48,40 @@ const useStyles = makeStyles(
 
 export interface LoginCardProps {
   error: boolean;
-  disableLoginButton: boolean;
+  externalError: boolean;
+  disabled: boolean;
+  loading: boolean;
+  externalAuthentications?: AvailableExternalAuthentications_shop_availableExternalAuthentications[];
+  onExternalAuthentication: (pluginId: string) => void;
   onPasswordRecovery: () => void;
-  onSubmit?(event: FormData);
+  onSubmit?: (event: LoginFormData) => SubmitPromise;
 }
 
 const LoginCard: React.FC<LoginCardProps> = props => {
-  const { error, disableLoginButton, onPasswordRecovery, onSubmit } = props;
+  const {
+    error,
+    externalError,
+    disabled,
+    loading,
+    externalAuthentications = [],
+    onExternalAuthentication,
+    onPasswordRecovery,
+    onSubmit
+  } = props;
 
   const classes = useStyles(props);
   const intl = useIntl();
 
-  let initialFormData = { email: "", password: "" };
+  if (loading) {
-  if (DEMO_MODE) {
+    return (
-    initialFormData = {
+      <div className={classes.loading}>
-      email: "admin@example.com",
+        <CircularProgress size={128} />
-      password: "admin"
+      </div>
-    };
+    );
   }
 
   return (
-    <Form initial={initialFormData} onSubmit={onSubmit}>
+    <LoginForm onSubmit={onSubmit}>
       {({ change: handleChange, data, submit: handleSubmit }) => (
         <>
           {error && (
@@ -73,6 +91,13 @@ const LoginCard: React.FC<LoginCardProps> = props => {
               </Typography>
             </div>
           )}
+          {externalError && (
+            <div className={classes.panel} data-test="loginErrorMessage">
+              <Typography variant="caption">
+                <FormattedMessage defaultMessage="Sorry, login went wrong. Please try again." />
+              </Typography>
+            </div>
+          )}
           <TextField
             autoFocus
             fullWidth
@@ -84,6 +109,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
             inputProps={{
               "data-test": "email"
             }}
+            disabled={disabled}
           />
           <FormSpacer />
           <TextField
@@ -99,13 +125,14 @@ const LoginCard: React.FC<LoginCardProps> = props => {
             inputProps={{
               "data-test": "password"
             }}
+            disabled={disabled}
           />
           <FormSpacer />
           <div className={classes.buttonContainer}>
             <Button
               className={classes.loginButton}
               color="primary"
-              disabled={disableLoginButton}
+              disabled={disabled}
               variant="contained"
               onClick={handleSubmit}
               type="submit"
@@ -115,15 +142,56 @@ const LoginCard: React.FC<LoginCardProps> = props => {
             </Button>
           </div>
           <FormSpacer />
-          <Typography className={classes.link} onClick={onPasswordRecovery}>
+          <Typography>
             <FormattedMessage
-              defaultMessage="Reset your password"
+              defaultMessage="Forgot password? {resetPasswordLink}"
-              description="button"
+              description="description"
+              values={{
+                resetPasswordLink: (
+                  <a className={classes.link} onClick={onPasswordRecovery}>
+                    <FormattedMessage
+                      defaultMessage="Use this link to recover it"
+                      description="link"
+                    />
+                  </a>
+                )
+              }}
+            />
+          </Typography>
+          {externalAuthentications.length > 0 && (
+            <>
+              <FormSpacer />
+              <Divider />
+              <FormSpacer />
+              <Typography>
+                <FormattedMessage
+                  defaultMessage="or login using"
+                  description="description"
                 />
               </Typography>
             </>
           )}
-    </Form>
+          {externalAuthentications.map(externalAuthentication => (
+            <React.Fragment key={externalAuthentication.id}>
+              <FormSpacer />
+              <Button
+                color="primary"
+                fullWidth
+                variant="outlined"
+                size="large"
+                onClick={() =>
+                  onExternalAuthentication(externalAuthentication.id)
+                }
+                data-test="external-authentication"
+                disabled={disabled}
+              >
+                {externalAuthentication.name}
+              </Button>
+            </React.Fragment>
+          ))}
+        </>
+      )}
+    </LoginForm>
   );
 };
 LoginCard.displayName = "LoginCard";

src/auth/components/LoginPage/form.tsx

@@ -0,0 +1,73 @@
+import { DEMO_MODE } from "@saleor/config";
+import useForm, { FormChange, SubmitPromise } from "@saleor/hooks/useForm";
+import handleFormSubmit from "@saleor/utils/handlers/handleFormSubmit";
+import React from "react";
+
+export interface LoginFormData {
+  email: string;
+  password: string;
+}
+
+export interface UseLoginFormResult {
+  change: FormChange;
+  data: LoginFormData;
+  hasChanged: boolean;
+  submit: () => Promise<boolean>;
+}
+
+export interface LoginFormProps {
+  children: (props: UseLoginFormResult) => React.ReactNode;
+  onSubmit: (data: LoginFormData) => SubmitPromise;
+}
+
+const getLoginFormData = () => {
+  if (DEMO_MODE) {
+    return {
+      email: "admin@example.com",
+      password: "admin"
+    };
+  }
+  return { email: "", password: "" };
+};
+
+function useLoginForm(
+  onSubmit: (data: LoginFormData) => SubmitPromise
+): UseLoginFormResult {
+  const [changed, setChanged] = React.useState(false);
+  const triggerChange = () => setChanged(true);
+
+  const form = useForm(getLoginFormData());
+
+  const handleChange: FormChange = (event, cb) => {
+    form.change(event, cb);
+    triggerChange();
+  };
+
+  const data: LoginFormData = {
+    ...form.data
+  };
+
+  const handleSubmit = async (data: LoginFormData) => {
+    const errors = await onSubmit(data);
+
+    return errors;
+  };
+
+  const submit = async () => handleFormSubmit(data, handleSubmit, setChanged);
+
+  return {
+    change: handleChange,
+    data,
+    hasChanged: changed,
+    submit
+  };
+}
+
+const LoginForm: React.FC<LoginFormProps> = ({ children, onSubmit }) => {
+  const props = useLoginForm(onSubmit);
+
+  return <form onSubmit={props.submit}>{children(props)}</form>;
+};
+
+LoginForm.displayName = "LoginForm";
+export default LoginForm;

src/auth/hooks/useAuthProvider.ts

@@ -0,0 +1,58 @@
+import { IMessageContext } from "@saleor/components/messages";
+import { User } from "@saleor/fragments/types/User";
+import useLocalStorage from "@saleor/hooks/useLocalStorage";
+import ApolloClient from "apollo-client";
+import { MutableRefObject } from "react";
+import { IntlShape } from "react-intl";
+
+import { useExternalAuthProvider } from "./useExternalAuthProvider";
+import { useSaleorAuthProvider } from "./useSaleorAuthProvider";
+
+export interface UseAuthProvider {
+  logout: () => void;
+  tokenAuthLoading: boolean;
+  tokenRefresh: () => Promise<boolean>;
+  tokenVerifyLoading: boolean;
+  user?: User;
+  autologinPromise?: MutableRefObject<Promise<any>>;
+}
+export interface UseAuthProviderOpts {
+  intl: IntlShape;
+  notify: IMessageContext;
+  apolloClient: ApolloClient<any>;
+}
+
+export function useAuthProvider(opts: UseAuthProviderOpts) {
+  const [authPlugin, setAuthPlugin] = useLocalStorage("authPlugin", undefined);
+
+  const saleorAuth = useSaleorAuthProvider({
+    authPlugin,
+    setAuthPlugin,
+    ...opts
+  });
+
+  const externalAuth = useExternalAuthProvider({
+    authPlugin,
+    setAuthPlugin,
+    ...opts
+  });
+
+  const loginAuth = {
+    login: saleorAuth.login,
+    loginByExternalPlugin: externalAuth.loginByExternalPlugin,
+    loginByToken: saleorAuth.loginByToken,
+    requestLoginByExternalPlugin: externalAuth.requestLoginByExternalPlugin
+  };
+
+  if (authPlugin) {
+    return {
+      ...externalAuth,
+      ...loginAuth
+    };
+  }
+
+  return {
+    ...saleorAuth,
+    ...loginAuth
+  };
+}

src/auth/hooks/useExternalAuthProvider.ts

@@ -0,0 +1,262 @@
+import { DEMO_MODE } from "@saleor/config";
+import { User } from "@saleor/fragments/types/User";
+import { SetLocalStorage } from "@saleor/hooks/useLocalStorage";
+import { commonMessages } from "@saleor/intl";
+import { getMutationStatus } from "@saleor/misc";
+import errorTracker from "@saleor/services/errorTracking";
+import { useEffect, useRef, useState } from "react";
+import { useMutation } from "react-apollo";
+
+import {
+  externalAuthenticationUrlMutation,
+  externalObtainAccessTokensMutation,
+  externalTokenRefreshMutation,
+  externalTokenVerifyMutation
+} from "../mutations";
+import {
+  ExternalAuthenticationUrl,
+  ExternalAuthenticationUrlVariables
+} from "../types/ExternalAuthenticationUrl";
+import {
+  ExternalObtainAccessTokens,
+  ExternalObtainAccessTokens_externalObtainAccessTokens,
+  ExternalObtainAccessTokensVariables
+} from "../types/ExternalObtainAccessTokens";
+import {
+  ExternalRefreshToken,
+  ExternalRefreshTokenVariables
+} from "../types/ExternalRefreshToken";
+import {
+  ExternalVerifyToken,
+  ExternalVerifyTokenVariables
+} from "../types/ExternalVerifyToken";
+import {
+  displayDemoMessage,
+  getTokens,
+  removeTokens,
+  setAuthToken,
+  setTokens
+} from "../utils";
+import { UseAuthProvider, UseAuthProviderOpts } from "./useAuthProvider";
+
+export interface RequestExternalLoginInput {
+  redirectUri: string;
+}
+export interface ExternalLoginInput {
+  code: string;
+  state: string;
+}
+
+export interface UseExternalAuthProvider extends UseAuthProvider {
+  requestLoginByExternalPlugin: (
+    pluginId: string,
+    input: RequestExternalLoginInput
+  ) => Promise<void>;
+  loginByExternalPlugin: (
+    input: ExternalLoginInput
+  ) => Promise<ExternalObtainAccessTokens_externalObtainAccessTokens>;
+}
+export interface UseExternalAuthProviderOpts extends UseAuthProviderOpts {
+  setAuthPlugin: SetLocalStorage<any>;
+  authPlugin: string;
+}
+
+const persistToken = false;
+
+export function useExternalAuthProvider({
+  apolloClient,
+  authPlugin,
+  intl,
+  notify,
+  setAuthPlugin
+}: UseExternalAuthProviderOpts): UseExternalAuthProvider {
+  const [userContext, setUserContext] = useState<undefined | User>(undefined);
+  const autologinPromise = useRef<Promise<any>>();
+  const refreshPromise = useRef<Promise<boolean>>();
+
+  useEffect(() => {
+    const token = getTokens().auth;
+    if (authPlugin && !!token && !userContext) {
+      const input = JSON.stringify({
+        token
+      });
+      autologinPromise.current = tokenVerify({
+        variables: { input, pluginId: authPlugin }
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (authPlugin && userContext) {
+      const { id, email, firstName, lastName } = userContext;
+      errorTracker.setUserData({
+        email,
+        id,
+        username: `${firstName} ${lastName}`
+      });
+
+      if (!userContext.isStaff) {
+        logout();
+        notify({
+          status: "error",
+          text: intl.formatMessage(commonMessages.unauthorizedDashboardAccess),
+          title: intl.formatMessage(commonMessages.insufficientPermissions)
+        });
+      }
+    }
+  }, [userContext]);
+
+  const logout = () => {
+    setUserContext(undefined);
+    setAuthPlugin(undefined);
+    removeTokens();
+  };
+
+  const [externalAuthenticationUrl] = useMutation<
+    ExternalAuthenticationUrl,
+    ExternalAuthenticationUrlVariables
+  >(externalAuthenticationUrlMutation, {
+    client: apolloClient,
+    onError: logout
+  });
+  const [obtainAccessTokens, obtainAccessTokensResult] = useMutation<
+    ExternalObtainAccessTokens,
+    ExternalObtainAccessTokensVariables
+  >(externalObtainAccessTokensMutation, {
+    client: apolloClient,
+    onCompleted: ({ externalObtainAccessTokens }) => {
+      if (externalObtainAccessTokens.errors.length > 0) {
+        logout();
+      }
+
+      const user = externalObtainAccessTokens.user;
+
+      setUserContext(user);
+      if (user) {
+        setTokens(
+          externalObtainAccessTokens.token,
+          externalObtainAccessTokens.csrfToken,
+          persistToken
+        );
+      }
+    },
+    onError: logout
+  });
+  const [tokenRefresh] = useMutation<
+    ExternalRefreshToken,
+    ExternalRefreshTokenVariables
+  >(externalTokenRefreshMutation, {
+    client: apolloClient,
+    onError: logout
+  });
+  const [tokenVerify, tokenVerifyResult] = useMutation<
+    ExternalVerifyToken,
+    ExternalVerifyTokenVariables
+  >(externalTokenVerifyMutation, {
+    client: apolloClient,
+    onCompleted: result => {
+      if (result.externalVerify === null) {
+        logout();
+      } else {
+        const user = result.externalVerify?.user;
+
+        if (!!user) {
+          setUserContext(user);
+        }
+      }
+    },
+    onError: logout
+  });
+
+  const obtainAccessTokensOpts = {
+    ...obtainAccessTokensResult,
+    status: getMutationStatus(obtainAccessTokensResult)
+  };
+  const tokenVerifyOpts = {
+    ...tokenVerifyResult,
+    status: getMutationStatus(tokenVerifyResult)
+  };
+
+  const onLogin = () => {
+    if (DEMO_MODE) {
+      displayDemoMessage(intl, notify);
+    }
+  };
+
+  const requestLoginByExternalPlugin = async (
+    pluginId: string,
+    pluginInput: RequestExternalLoginInput
+  ) => {
+    const input = JSON.stringify(pluginInput);
+    const result = await externalAuthenticationUrl({
+      variables: {
+        input,
+        pluginId
+      }
+    });
+
+    if (result && !result.data.externalAuthenticationUrl.errors.length) {
+      setAuthPlugin(pluginId);
+
+      const authenticationData = JSON.parse(
+        result.data.externalAuthenticationUrl.authenticationData
+      );
+
+      location.href = authenticationData.authorizationUrl;
+    } else {
+      setAuthPlugin(undefined);
+    }
+  };
+
+  const loginByExternalPlugin = async (loginInput: ExternalLoginInput) => {
+    const input = JSON.stringify(loginInput);
+    const result = await obtainAccessTokens({
+      variables: { input, pluginId: authPlugin }
+    });
+
+    if (result && !result.data?.externalObtainAccessTokens?.errors?.length) {
+      if (!!onLogin) {
+        onLogin();
+      }
+    } else {
+      setAuthPlugin(undefined);
+    }
+
+    return result?.data?.externalObtainAccessTokens;
+  };
+
+  const refreshToken = (): Promise<boolean> => {
+    if (!!refreshPromise.current) {
+      return refreshPromise.current;
+    }
+
+    return new Promise(resolve => {
+      const token = getTokens().refresh;
+      const input = JSON.stringify({
+        refreshToken: token
+      });
+
+      return tokenRefresh({ variables: { input, pluginId: authPlugin } }).then(
+        refreshData => {
+          if (!!refreshData.data.externalRefresh?.token) {
+            setAuthToken(refreshData.data.externalRefresh.token, persistToken);
+            return resolve(true);
+          }
+
+          return resolve(false);
+        }
+      );
+    });
+  };
+
+  return {
+    autologinPromise,
+    loginByExternalPlugin,
+    logout,
+    requestLoginByExternalPlugin,
+    tokenAuthLoading: obtainAccessTokensOpts.loading,
+    tokenRefresh: refreshToken,
+    tokenVerifyLoading: tokenVerifyOpts.loading,
+    user: userContext
+  };
+}

src/auth/hooks/useSaleorAuthProvider.ts

@@ -0,0 +1,204 @@
+import { DEMO_MODE } from "@saleor/config";
+import { User } from "@saleor/fragments/types/User";
+import { SetLocalStorage } from "@saleor/hooks/useLocalStorage";
+import { commonMessages } from "@saleor/intl";
+import { getMutationStatus } from "@saleor/misc";
+import errorTracker from "@saleor/services/errorTracking";
+import {
+  isSupported as isCredentialsManagementAPISupported,
+  login as loginWithCredentialsManagementAPI,
+  saveCredentials
+} from "@saleor/utils/credentialsManagement";
+import { useEffect, useRef, useState } from "react";
+import { useMutation } from "react-apollo";
+
+import {
+  tokenAuthMutation,
+  tokenRefreshMutation,
+  tokenVerifyMutation
+} from "../mutations";
+import { RefreshToken, RefreshTokenVariables } from "../types/RefreshToken";
+import {
+  TokenAuth,
+  TokenAuth_tokenCreate,
+  TokenAuthVariables
+} from "../types/TokenAuth";
+import { VerifyToken, VerifyTokenVariables } from "../types/VerifyToken";
+import {
+  displayDemoMessage,
+  getTokens,
+  removeTokens,
+  setAuthToken,
+  setTokens
+} from "../utils";
+import { UseAuthProvider, UseAuthProviderOpts } from "./useAuthProvider";
+
+export interface UseSaleorAuthProvider extends UseAuthProvider {
+  login: (username: string, password: string) => Promise<TokenAuth_tokenCreate>;
+  loginByToken: (auth: string, csrf: string, user: User) => void;
+}
+export interface UseSaleorAuthProviderOpts extends UseAuthProviderOpts {
+  setAuthPlugin: SetLocalStorage<any>;
+  authPlugin: string;
+}
+
+const persistToken = false;
+
+export function useSaleorAuthProvider({
+  apolloClient,
+  authPlugin,
+  intl,
+  notify,
+  setAuthPlugin
+}: UseSaleorAuthProviderOpts): UseSaleorAuthProvider {
+  const [userContext, setUserContext] = useState<undefined | User>(undefined);
+  const autologinPromise = useRef<Promise<any>>();
+  const refreshPromise = useRef<Promise<boolean>>();
+
+  useEffect(() => {
+    const token = getTokens().auth;
+    if (!authPlugin && !!token && !userContext) {
+      autologinPromise.current = tokenVerify({ variables: { token } });
+    } else if (!authPlugin) {
+      autologinPromise.current = loginWithCredentialsManagementAPI(login);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!authPlugin && userContext) {
+      const { id, email, firstName, lastName } = userContext;
+      errorTracker.setUserData({
+        email,
+        id,
+        username: `${firstName} ${lastName}`
+      });
+
+      if (!userContext.isStaff) {
+        logout();
+        notify({
+          status: "error",
+          text: intl.formatMessage(commonMessages.unauthorizedDashboardAccess),
+          title: intl.formatMessage(commonMessages.insufficientPermissions)
+        });
+      }
+    }
+  }, [userContext]);
+
+  const logout = () => {
+    setUserContext(undefined);
+    if (isCredentialsManagementAPISupported) {
+      navigator.credentials.preventSilentAccess();
+    }
+    removeTokens();
+  };
+
+  const [tokenAuth, tokenAuthResult] = useMutation<
+    TokenAuth,
+    TokenAuthVariables
+  >(tokenAuthMutation, {
+    client: apolloClient,
+    onCompleted: ({ tokenCreate }) => {
+      if (tokenCreate.errors.length > 0) {
+        logout();
+      }
+
+      const user = tokenCreate.user;
+
+      setUserContext(user);
+      if (user) {
+        setTokens(tokenCreate.token, tokenCreate.csrfToken, persistToken);
+      }
+    },
+    onError: logout
+  });
+  const [tokenRefresh] = useMutation<RefreshToken, RefreshTokenVariables>(
+    tokenRefreshMutation,
+    {
+      client: apolloClient,
+      onError: logout
+    }
+  );
+  const [tokenVerify, tokenVerifyResult] = useMutation<
+    VerifyToken,
+    VerifyTokenVariables
+  >(tokenVerifyMutation, {
+    client: apolloClient,
+    onCompleted: result => {
+      if (result.tokenVerify === null) {
+        logout();
+      } else {
+        const user = result.tokenVerify?.user;
+
+        if (!!user) {
+          setUserContext(user);
+        }
+      }
+    },
+    onError: logout
+  });
+
+  const tokenAuthOpts = {
+    ...tokenAuthResult,
+    status: getMutationStatus(tokenAuthResult)
+  };
+  const tokenVerifyOpts = {
+    ...tokenVerifyResult,
+    status: getMutationStatus(tokenVerifyResult)
+  };
+
+  const onLogin = () => {
+    if (DEMO_MODE) {
+      displayDemoMessage(intl, notify);
+    }
+  };
+
+  const login = async (email: string, password: string) => {
+    setAuthPlugin(undefined);
+    const result = await tokenAuth({ variables: { email, password } });
+
+    if (result && !result.data.tokenCreate.errors.length) {
+      if (!!onLogin) {
+        onLogin();
+      }
+      saveCredentials(result.data.tokenCreate.user, password);
+    }
+
+    return result.data.tokenCreate;
+  };
+
+  const loginByToken = (auth: string, refresh: string, user: User) => {
+    setAuthPlugin(undefined);
+    setUserContext(user);
+    setTokens(auth, refresh, persistToken);
+  };
+
+  const refreshToken = (): Promise<boolean> => {
+    if (!!refreshPromise.current) {
+      return refreshPromise.current;
+    }
+
+    return new Promise(resolve => {
+      const token = getTokens().refresh;
+
+      return tokenRefresh({ variables: { token } }).then(refreshData => {
+        if (!!refreshData.data.tokenRefresh?.token) {
+          setAuthToken(refreshData.data.tokenRefresh.token, persistToken);
+          return resolve(true);
+        }
+
+        return resolve(false);
+      });
+    });
+  };
+
+  return {
+    autologinPromise,
+    login,
+    loginByToken,
+    logout,
+    tokenAuthLoading: tokenAuthOpts.loading,
+    tokenRefresh: refreshToken,
+    tokenVerifyLoading: tokenVerifyOpts.loading,
+    user: userContext
+  };
+}

src/auth/index.tsx

@@ -1,32 +1,57 @@
 import { User } from "@saleor/fragments/types/User";
-import React from "react";
+import { parse as parseQs } from "qs";
-import { Route, Switch } from "react-router-dom";
+import React, { MutableRefObject } from "react";
+import { Route, RouteComponentProps, Switch } from "react-router-dom";
 
 import Layout from "./components/Layout";
 import {
+  ExternalLoginInput,
+  RequestExternalLoginInput
+} from "./hooks/useExternalAuthProvider";
+import { ExternalObtainAccessTokens_externalObtainAccessTokens } from "./types/ExternalObtainAccessTokens";
+import { TokenAuth_tokenCreate } from "./types/TokenAuth";
+import {
+  LoginUrlQueryParams,
   newPasswordPath,
   passwordResetPath,
   passwordResetSuccessPath
 } from "./urls";
-import LoginView from "./views/Login";
+import LoginViewComponent from "./views/Login";
 import NewPassword from "./views/NewPassword";
 import ResetPassword from "./views/ResetPassword";
 import ResetPasswordSuccess from "./views/ResetPasswordSuccess";
 
+const LoginView: React.FC<RouteComponentProps<any>> = () => {
+  const qs = parseQs(location.search.substr(1));
+  const params: LoginUrlQueryParams = qs;
+
+  return <LoginViewComponent params={params} />;
+};
+
 interface UserContext {
-  login: (username: string, password: string) => void;
+  login: (username: string, password: string) => Promise<TokenAuth_tokenCreate>;
+  loginByExternalPlugin: (
+    input: ExternalLoginInput
+  ) => Promise<ExternalObtainAccessTokens_externalObtainAccessTokens>;
   loginByToken: (auth: string, csrf: string, user: User) => void;
   logout: () => void;
+  requestLoginByExternalPlugin: (
+    pluginId: string,
+    input: RequestExternalLoginInput
+  ) => Promise<void>;
   tokenAuthLoading: boolean;
   tokenRefresh: () => Promise<boolean>;
   tokenVerifyLoading: boolean;
   user?: User;
+  autologinPromise?: MutableRefObject<Promise<any>>;
 }
 
 export const UserContext = React.createContext<UserContext>({
   login: undefined,
+  loginByExternalPlugin: undefined,
   loginByToken: undefined,
   logout: undefined,
+  requestLoginByExternalPlugin: undefined,
   tokenAuthLoading: false,
   tokenRefresh: undefined,
   tokenVerifyLoading: false

src/auth/mutations.ts

@@ -82,3 +82,52 @@ export const SetPasswordMutation = TypedMutation<
   SetPassword,
   SetPasswordVariables
 >(setPassword);
+
+export const externalAuthenticationUrlMutation = gql`
+  ${accountErrorFragment}
+  mutation ExternalAuthenticationUrl($pluginId: String!, $input: JSONString!) {
+    externalAuthenticationUrl(pluginId: $pluginId, input: $input) {
+      authenticationData
+      errors: accountErrors {
+        ...AccountErrorFragment
+      }
+    }
+  }
+`;
+
+export const externalObtainAccessTokensMutation = gql`
+  ${accountErrorFragment}
+  ${fragmentUser}
+  mutation ExternalObtainAccessTokens($pluginId: String!, $input: JSONString!) {
+    externalObtainAccessTokens(pluginId: $pluginId, input: $input) {
+      token
+      csrfToken
+      user {
+        ...User
+      }
+      errors: accountErrors {
+        ...AccountErrorFragment
+      }
+    }
+  }
+`;
+
+export const externalTokenRefreshMutation = gql`
+  mutation ExternalRefreshToken($pluginId: String!, $input: JSONString!) {
+    externalRefresh(pluginId: $pluginId, input: $input) {
+      token
+    }
+  }
+`;
+
+export const externalTokenVerifyMutation = gql`
+  ${fragmentUser}
+  mutation ExternalVerifyToken($pluginId: String!, $input: JSONString!) {
+    externalVerify(pluginId: $pluginId, input: $input) {
+      verifyData
+      user {
+        ...User
+      }
+    }
+  }
+`;

src/auth/queries.ts

@@ -0,0 +1,12 @@
+import gql from "graphql-tag";
+
+export const availableExternalAuthentications = gql`
+  query AvailableExternalAuthentications {
+    shop {
+      availableExternalAuthentications {
+        id
+        name
+      }
+    }
+  }
+`;

src/auth/types/AvailableExternalAuthentications.ts

@@ -0,0 +1,22 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL query operation: AvailableExternalAuthentications
+// ====================================================
+
+export interface AvailableExternalAuthentications_shop_availableExternalAuthentications {
+  __typename: "ExternalAuthentication";
+  id: string;
+  name: string | null;
+}
+
+export interface AvailableExternalAuthentications_shop {
+  __typename: "Shop";
+  availableExternalAuthentications: AvailableExternalAuthentications_shop_availableExternalAuthentications[];
+}
+
+export interface AvailableExternalAuthentications {
+  shop: AvailableExternalAuthentications_shop;
+}

src/auth/types/ExternalAuthenticationUrl.ts

@@ -0,0 +1,30 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { AccountErrorCode } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL mutation operation: ExternalAuthenticationUrl
+// ====================================================
+
+export interface ExternalAuthenticationUrl_externalAuthenticationUrl_errors {
+  __typename: "AccountError";
+  code: AccountErrorCode;
+  field: string | null;
+}
+
+export interface ExternalAuthenticationUrl_externalAuthenticationUrl {
+  __typename: "ExternalAuthenticationUrl";
+  authenticationData: any | null;
+  errors: ExternalAuthenticationUrl_externalAuthenticationUrl_errors[];
+}
+
+export interface ExternalAuthenticationUrl {
+  externalAuthenticationUrl: ExternalAuthenticationUrl_externalAuthenticationUrl | null;
+}
+
+export interface ExternalAuthenticationUrlVariables {
+  pluginId: string;
+  input: any;
+}

src/auth/types/ExternalObtainAccessTokens.ts

@@ -0,0 +1,54 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { PermissionEnum, AccountErrorCode } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL mutation operation: ExternalObtainAccessTokens
+// ====================================================
+
+export interface ExternalObtainAccessTokens_externalObtainAccessTokens_user_userPermissions {
+  __typename: "UserPermission";
+  code: PermissionEnum;
+  name: string;
+}
+
+export interface ExternalObtainAccessTokens_externalObtainAccessTokens_user_avatar {
+  __typename: "Image";
+  url: string;
+}
+
+export interface ExternalObtainAccessTokens_externalObtainAccessTokens_user {
+  __typename: "User";
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  isStaff: boolean;
+  userPermissions: (ExternalObtainAccessTokens_externalObtainAccessTokens_user_userPermissions | null)[] | null;
+  avatar: ExternalObtainAccessTokens_externalObtainAccessTokens_user_avatar | null;
+}
+
+export interface ExternalObtainAccessTokens_externalObtainAccessTokens_errors {
+  __typename: "AccountError";
+  code: AccountErrorCode;
+  field: string | null;
+}
+
+export interface ExternalObtainAccessTokens_externalObtainAccessTokens {
+  __typename: "ExternalObtainAccessTokens";
+  token: string | null;
+  csrfToken: string | null;
+  user: ExternalObtainAccessTokens_externalObtainAccessTokens_user | null;
+  errors: ExternalObtainAccessTokens_externalObtainAccessTokens_errors[];
+}
+
+export interface ExternalObtainAccessTokens {
+  externalObtainAccessTokens: ExternalObtainAccessTokens_externalObtainAccessTokens | null;
+}
+
+export interface ExternalObtainAccessTokensVariables {
+  pluginId: string;
+  input: any;
+}

src/auth/types/ExternalRefreshToken.ts

@@ -0,0 +1,21 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL mutation operation: ExternalRefreshToken
+// ====================================================
+
+export interface ExternalRefreshToken_externalRefresh {
+  __typename: "ExternalRefresh";
+  token: string | null;
+}
+
+export interface ExternalRefreshToken {
+  externalRefresh: ExternalRefreshToken_externalRefresh | null;
+}
+
+export interface ExternalRefreshTokenVariables {
+  pluginId: string;
+  input: any;
+}

src/auth/types/ExternalVerifyToken.ts

@@ -0,0 +1,46 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { PermissionEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL mutation operation: ExternalVerifyToken
+// ====================================================
+
+export interface ExternalVerifyToken_externalVerify_user_userPermissions {
+  __typename: "UserPermission";
+  code: PermissionEnum;
+  name: string;
+}
+
+export interface ExternalVerifyToken_externalVerify_user_avatar {
+  __typename: "Image";
+  url: string;
+}
+
+export interface ExternalVerifyToken_externalVerify_user {
+  __typename: "User";
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  isStaff: boolean;
+  userPermissions: (ExternalVerifyToken_externalVerify_user_userPermissions | null)[] | null;
+  avatar: ExternalVerifyToken_externalVerify_user_avatar | null;
+}
+
+export interface ExternalVerifyToken_externalVerify {
+  __typename: "ExternalVerify";
+  verifyData: any | null;
+  user: ExternalVerifyToken_externalVerify_user | null;
+}
+
+export interface ExternalVerifyToken {
+  externalVerify: ExternalVerifyToken_externalVerify | null;
+}
+
+export interface ExternalVerifyTokenVariables {
+  pluginId: string;
+  input: any;
+}

src/auth/urls.ts

@@ -7,9 +7,18 @@ export const passwordResetSuccessPath = "/reset-password/success/";
 export const passwordResetSuccessUrl = passwordResetSuccessPath;
 
 export const newPasswordPath = "/new-password/";
+
+export const loginCallbackPath = "/login/callback/";
+
 export interface NewPasswordUrlQueryParams {
   email: string;
   token: string;
 }
 export const newPasswordUrl = (params?: NewPasswordUrlQueryParams) =>
   newPasswordPath + "?" + stringifyQs(params);
+
+export interface LoginOpenidconnectUrlQueryParams {
+  code: string;
+  state: string;
+}
+export type LoginUrlQueryParams = LoginOpenidconnectUrlQueryParams;

src/auth/views/Login.tsx

@@ -1,20 +1,93 @@
+import { APP_DEFAULT_URI, APP_MOUNT_URI } from "@saleor/config";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useUser from "@saleor/hooks/useUser";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useQuery } from "react-apollo";
+import urlJoin from "url-join";
+import useRouter from "use-react-router";
 
-import LoginPage, { FormData } from "../components/LoginPage";
+import LoginPage from "../components/LoginPage";
-import { passwordResetUrl } from "../urls";
+import { LoginFormData } from "../components/LoginPage/form";
+import { availableExternalAuthentications } from "../queries";
+import { AvailableExternalAuthentications } from "../types/AvailableExternalAuthentications";
+import {
+  loginCallbackPath,
+  LoginUrlQueryParams,
+  passwordResetUrl
+} from "../urls";
 
-const LoginView: React.FC = () => {
+interface LoginViewProps {
+  params: LoginUrlQueryParams;
+}
+
+const LoginView: React.FC<LoginViewProps> = ({ params }) => {
   const navigate = useNavigator();
-  const { login, user, tokenAuthLoading } = useUser();
+  const { location } = useRouter();
+  const {
+    login,
+    requestLoginByExternalPlugin,
+    loginByExternalPlugin,
+    tokenAuthLoading
+  } = useUser();
+  const [isError, setIsError] = useState(false);
+  const [isExternalError, setIsExternalError] = useState(false);
+  const {
+    data: externalAuthentications,
+    loading: externalAuthenticationsLoading
+  } = useQuery<AvailableExternalAuthentications>(
+    availableExternalAuthentications
+  );
 
-  const handleSubmit = (data: FormData) => login(data.email, data.password);
+  const handleSubmit = async (data: LoginFormData) => {
+    const result = await login(data.email, data.password);
+    const errors = result?.errors || [];
+
+    setIsExternalError(false);
+    setIsError(!result || errors?.length > 0);
+    return errors;
+  };
+
+  const handleRequestExternalAuthentication = (pluginId: string) =>
+    requestLoginByExternalPlugin(pluginId, {
+      redirectUri: urlJoin(
+        window.location.origin,
+        APP_MOUNT_URI === APP_DEFAULT_URI ? "" : APP_MOUNT_URI,
+        loginCallbackPath
+      )
+    });
+
+  const handleExternalAuthentication = async (code: string, state: string) => {
+    const result = await loginByExternalPlugin({ code, state });
+    const errors = result?.errors || [];
+
+    setIsError(false);
+    if (!result || errors?.length > 0) {
+      setIsExternalError(true);
+    } else {
+      navigate(APP_DEFAULT_URI);
+    }
+    return errors;
+  };
+
+  useEffect(() => {
+    const { code, state } = params;
+    const isCallbackPath = location.pathname.includes(loginCallbackPath);
+
+    if (code && state && isCallbackPath) {
+      handleExternalAuthentication(code, state);
+    }
+  }, []);
 
   return (
     <LoginPage
-      error={user === null}
+      error={isError}
-      disableLoginButton={tokenAuthLoading}
+      externalError={isExternalError}
+      disabled={tokenAuthLoading}
+      externalAuthentications={
+        externalAuthentications?.shop?.availableExternalAuthentications
+      }
+      loading={externalAuthenticationsLoading || tokenAuthLoading}
+      onExternalAuthentication={handleRequestExternalAuthentication}
       onPasswordRecovery={() => navigate(passwordResetUrl)}
       onSubmit={handleSubmit}
     />

src/channels/queries.ts

@@ -1,10 +1,23 @@
-import { channelDetailsFragment } from "@saleor/fragments/channels";
+import {
+  channelDetailsFragment,
+  channelFragment
+} from "@saleor/fragments/channels";
 import makeQuery from "@saleor/hooks/makeQuery";
 import gql from "graphql-tag";
 
+import { BaseChannels } from "./types/BaseChannels";
 import { Channel, ChannelVariables } from "./types/Channel";
 import { Channels } from "./types/Channels";
 
+export const channelsListBase = gql`
+  ${channelFragment}
+  query BaseChannels {
+    channels {
+      ...ChannelFragment
+    }
+  }
+`;
+
 export const channelsList = gql`
   ${channelDetailsFragment}
   query Channels {
@@ -23,6 +36,9 @@ export const channelDetails = gql`
   }
 `;
 
+export const useBaseChannelsList = makeQuery<BaseChannels, {}>(
+  channelsListBase
+);
 export const useChannelsList = makeQuery<Channels, {}>(channelsList);
 export const useChannelDetails = makeQuery<Channel, ChannelVariables>(
   channelDetails

src/channels/types/BaseChannels.ts

@@ -0,0 +1,20 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL query operation: BaseChannels
+// ====================================================
+
+export interface BaseChannels_channels {
+  __typename: "Channel";
+  id: string;
+  isActive: boolean;
+  name: string;
+  slug: string;
+  currencyCode: string;
+}
+
+export interface BaseChannels {
+  channels: BaseChannels_channels[] | null;
+}

src/components/AppLayout/AppChannelContext.tsx

@@ -1,12 +1,12 @@
 import { useAuth } from "@saleor/auth/AuthProvider";
-import { useChannelsList } from "@saleor/channels/queries";
+import { useBaseChannelsList } from "@saleor/channels/queries";
-import { ChannelDetailsFragment } from "@saleor/fragments/types/ChannelDetailsFragment";
+import { ChannelFragment } from "@saleor/fragments/types/ChannelFragment";
 import useLocalStorage from "@saleor/hooks/useLocalStorage";
 import React from "react";
 
 interface UseAppChannel {
-  availableChannels: ChannelDetailsFragment[];
+  availableChannels: ChannelFragment[];
-  channel: ChannelDetailsFragment;
+  channel: ChannelFragment;
   isPickerActive: boolean;
   refreshChannels: () => void;
   setChannel: (id: string) => void;
@@ -27,7 +27,7 @@ const AppChannelContext = React.createContext<AppChannelContextData>({
 export const AppChannelProvider: React.FC = ({ children }) => {
   const { isAuthenticated } = useAuth();
   const [selectedChannel, setSelectedChannel] = useLocalStorage("channel", "");
-  const { data: channelData, refetch } = useChannelsList({
+  const { data: channelData, refetch } = useBaseChannelsList({
     skip: !isAuthenticated
   });
 

src/components/AppLayout/AppChannelSelect.tsx

@@ -1,5 +1,5 @@
 import makeStyles from "@material-ui/core/styles/makeStyles";
-import { ChannelDetailsFragment } from "@saleor/fragments/types/ChannelDetailsFragment";
+import { ChannelFragment } from "@saleor/fragments/types/ChannelFragment";
 import { ChannelProps } from "@saleor/types";
 import { mapNodeToChoice } from "@saleor/utils/maps";
 import React from "react";
@@ -22,7 +22,7 @@ const useStyles = makeStyles(
 );
 
 export interface AppChannelSelectProps extends ChannelProps {
-  channels: ChannelDetailsFragment[];
+  channels: ChannelFragment[];
   disabled: boolean;
   onChannelSelect: (id: string) => void;
 }

src/config.ts

@@ -3,6 +3,7 @@ import { SearchVariables } from "./hooks/makeSearch";
 import { ListSettings, ListViews, Pagination } from "./types";
 
 export const APP_MOUNT_URI = process.env.APP_MOUNT_URI;
+export const APP_DEFAULT_URI = "/";
 export const API_URI = process.env.API_URI;
 
 export const DEFAULT_INITIAL_SEARCH_DATA: SearchVariables = {

src/customers/types/CustomerDetails.ts

@@ -80,8 +80,8 @@ export interface CustomerDetails_user_orders_edges_node {
   id: string;
   created: any;
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
-  total: CustomerDetails_user_orders_edges_node_total | null;
+  total: CustomerDetails_user_orders_edges_node_total;
 }
 
 export interface CustomerDetails_user_orders_edges {

src/fragments/channels.ts

@@ -8,13 +8,21 @@ export const channelErrorFragment = gql`
   }
 `;
 
-export const channelDetailsFragment = gql`
+export const channelFragment = gql`
-  fragment ChannelDetailsFragment on Channel {
+  fragment ChannelFragment on Channel {
     id
     isActive
     name
     slug
     currencyCode
+  }
+`;
+
+export const channelDetailsFragment = gql`
+  ${channelFragment}
+
+  fragment ChannelDetailsFragment on Channel {
+    ...ChannelFragment
     hasOrders
   }
 `;

src/fragments/types/ChannelFragment.ts

@@ -0,0 +1,16 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL fragment: ChannelFragment
+// ====================================================
+
+export interface ChannelFragment {
+  __typename: "Channel";
+  id: string;
+  isActive: boolean;
+  name: string;
+  slug: string;
+  currencyCode: string;
+}

src/fragments/types/FulfillmentFragment.ts

@@ -46,7 +46,7 @@ export interface FulfillmentFragment_lines_orderLine {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: FulfillmentFragment_lines_orderLine_unitPrice | null;
+  unitPrice: FulfillmentFragment_lines_orderLine_unitPrice;
   thumbnail: FulfillmentFragment_lines_orderLine_thumbnail | null;
 }
 

src/fragments/types/MetadataFragment.ts

@@ -19,7 +19,7 @@ export interface MetadataFragment_privateMetadata {
 }
 
 export interface MetadataFragment {
-  __typename: "App" | "ShippingZone" | "ShippingMethod" | "Product" | "ProductType" | "Attribute" | "Category" | "ProductVariant" | "DigitalContent" | "Collection" | "Page" | "PageType" | "MenuItem" | "Menu" | "User" | "Checkout" | "Order" | "Fulfillment" | "Invoice";
+  __typename: "App" | "Warehouse" | "ShippingZone" | "ShippingMethod" | "Product" | "ProductType" | "Attribute" | "Category" | "ProductVariant" | "DigitalContent" | "Collection" | "Page" | "PageType" | "MenuItem" | "Menu" | "User" | "Checkout" | "Order" | "Fulfillment" | "Invoice";
   metadata: (MetadataFragment_metadata | null)[];
   privateMetadata: (MetadataFragment_privateMetadata | null)[];
 }

src/fragments/types/OrderDetailsFragment.ts

@@ -125,7 +125,7 @@ export interface OrderDetailsFragment_fulfillments_lines_orderLine {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderDetailsFragment_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderDetailsFragment_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderDetailsFragment_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -190,7 +190,7 @@ export interface OrderDetailsFragment_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderDetailsFragment_lines_unitPrice | null;
+  unitPrice: OrderDetailsFragment_lines_unitPrice;
   thumbnail: OrderDetailsFragment_lines_thumbnail | null;
 }
 
@@ -328,22 +328,22 @@ export interface OrderDetailsFragment {
   fulfillments: (OrderDetailsFragment_fulfillments | null)[];
   lines: (OrderDetailsFragment_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderDetailsFragment_shippingAddress | null;
   shippingMethod: OrderDetailsFragment_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderDetailsFragment_shippingPrice | null;
+  shippingPrice: OrderDetailsFragment_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderDetailsFragment_subtotal | null;
+  subtotal: OrderDetailsFragment_subtotal;
-  total: OrderDetailsFragment_total | null;
+  total: OrderDetailsFragment_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderDetailsFragment_totalAuthorized | null;
+  totalAuthorized: OrderDetailsFragment_totalAuthorized;
-  totalCaptured: OrderDetailsFragment_totalCaptured | null;
+  totalCaptured: OrderDetailsFragment_totalCaptured;
   user: OrderDetailsFragment_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderDetailsFragment_availableShippingMethods | null)[] | null;
   discount: OrderDetailsFragment_discount | null;
   invoices: (OrderDetailsFragment_invoices | null)[] | null;
   channel: OrderDetailsFragment_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }

src/fragments/types/OrderLineFragment.ts

@@ -44,6 +44,6 @@ export interface OrderLineFragment {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderLineFragment_unitPrice | null;
+  unitPrice: OrderLineFragment_unitPrice;
   thumbnail: OrderLineFragment_thumbnail | null;
 }

src/fragments/types/RefundOrderLineFragment.ts

@@ -27,6 +27,6 @@ export interface RefundOrderLineFragment {
   id: string;
   productName: string;
   quantity: number;
-  unitPrice: RefundOrderLineFragment_unitPrice | null;
+  unitPrice: RefundOrderLineFragment_unitPrice;
   thumbnail: RefundOrderLineFragment_thumbnail | null;
 }

src/orders/types/FulfillOrder.ts

@@ -133,7 +133,7 @@ export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -198,7 +198,7 @@ export interface FulfillOrder_orderFulfill_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: FulfillOrder_orderFulfill_order_lines_unitPrice | null;
+  unitPrice: FulfillOrder_orderFulfill_order_lines_unitPrice;
   thumbnail: FulfillOrder_orderFulfill_order_lines_thumbnail | null;
 }
 
@@ -336,24 +336,24 @@ export interface FulfillOrder_orderFulfill_order {
   fulfillments: (FulfillOrder_orderFulfill_order_fulfillments | null)[];
   lines: (FulfillOrder_orderFulfill_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: FulfillOrder_orderFulfill_order_shippingAddress | null;
   shippingMethod: FulfillOrder_orderFulfill_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: FulfillOrder_orderFulfill_order_shippingPrice | null;
+  shippingPrice: FulfillOrder_orderFulfill_order_shippingPrice;
   status: OrderStatus;
-  subtotal: FulfillOrder_orderFulfill_order_subtotal | null;
+  subtotal: FulfillOrder_orderFulfill_order_subtotal;
-  total: FulfillOrder_orderFulfill_order_total | null;
+  total: FulfillOrder_orderFulfill_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: FulfillOrder_orderFulfill_order_totalAuthorized | null;
+  totalAuthorized: FulfillOrder_orderFulfill_order_totalAuthorized;
-  totalCaptured: FulfillOrder_orderFulfill_order_totalCaptured | null;
+  totalCaptured: FulfillOrder_orderFulfill_order_totalCaptured;
   user: FulfillOrder_orderFulfill_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (FulfillOrder_orderFulfill_order_availableShippingMethods | null)[] | null;
   discount: FulfillOrder_orderFulfill_order_discount | null;
   invoices: (FulfillOrder_orderFulfill_order_invoices | null)[] | null;
   channel: FulfillOrder_orderFulfill_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface FulfillOrder_orderFulfill {

src/orders/types/OrderCancel.ts

@@ -131,7 +131,7 @@ export interface OrderCancel_orderCancel_order_fulfillments_lines_orderLine {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderCancel_orderCancel_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderCancel_orderCancel_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderCancel_orderCancel_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderCancel_orderCancel_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderCancel_orderCancel_order_lines_unitPrice | null;
+  unitPrice: OrderCancel_orderCancel_order_lines_unitPrice;
   thumbnail: OrderCancel_orderCancel_order_lines_thumbnail | null;
 }
 
@@ -334,24 +334,24 @@ export interface OrderCancel_orderCancel_order {
   fulfillments: (OrderCancel_orderCancel_order_fulfillments | null)[];
   lines: (OrderCancel_orderCancel_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderCancel_orderCancel_order_shippingAddress | null;
   shippingMethod: OrderCancel_orderCancel_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderCancel_orderCancel_order_shippingPrice | null;
+  shippingPrice: OrderCancel_orderCancel_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderCancel_orderCancel_order_subtotal | null;
+  subtotal: OrderCancel_orderCancel_order_subtotal;
-  total: OrderCancel_orderCancel_order_total | null;
+  total: OrderCancel_orderCancel_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderCancel_orderCancel_order_totalAuthorized | null;
+  totalAuthorized: OrderCancel_orderCancel_order_totalAuthorized;
-  totalCaptured: OrderCancel_orderCancel_order_totalCaptured | null;
+  totalCaptured: OrderCancel_orderCancel_order_totalCaptured;
   user: OrderCancel_orderCancel_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderCancel_orderCancel_order_availableShippingMethods | null)[] | null;
   discount: OrderCancel_orderCancel_order_discount | null;
   invoices: (OrderCancel_orderCancel_order_invoices | null)[] | null;
   channel: OrderCancel_orderCancel_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderCancel_orderCancel {

src/orders/types/OrderCapture.ts

@@ -131,7 +131,7 @@ export interface OrderCapture_orderCapture_order_fulfillments_lines_orderLine {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderCapture_orderCapture_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderCapture_orderCapture_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderCapture_orderCapture_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderCapture_orderCapture_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderCapture_orderCapture_order_lines_unitPrice | null;
+  unitPrice: OrderCapture_orderCapture_order_lines_unitPrice;
   thumbnail: OrderCapture_orderCapture_order_lines_thumbnail | null;
 }
 
@@ -334,24 +334,24 @@ export interface OrderCapture_orderCapture_order {
   fulfillments: (OrderCapture_orderCapture_order_fulfillments | null)[];
   lines: (OrderCapture_orderCapture_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderCapture_orderCapture_order_shippingAddress | null;
   shippingMethod: OrderCapture_orderCapture_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderCapture_orderCapture_order_shippingPrice | null;
+  shippingPrice: OrderCapture_orderCapture_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderCapture_orderCapture_order_subtotal | null;
+  subtotal: OrderCapture_orderCapture_order_subtotal;
-  total: OrderCapture_orderCapture_order_total | null;
+  total: OrderCapture_orderCapture_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderCapture_orderCapture_order_totalAuthorized | null;
+  totalAuthorized: OrderCapture_orderCapture_order_totalAuthorized;
-  totalCaptured: OrderCapture_orderCapture_order_totalCaptured | null;
+  totalCaptured: OrderCapture_orderCapture_order_totalCaptured;
   user: OrderCapture_orderCapture_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderCapture_orderCapture_order_availableShippingMethods | null)[] | null;
   discount: OrderCapture_orderCapture_order_discount | null;
   invoices: (OrderCapture_orderCapture_order_invoices | null)[] | null;
   channel: OrderCapture_orderCapture_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderCapture_orderCapture {

src/orders/types/OrderConfirm.ts

@@ -131,7 +131,7 @@ export interface OrderConfirm_orderConfirm_order_fulfillments_lines_orderLine {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderConfirm_orderConfirm_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderConfirm_orderConfirm_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderConfirm_orderConfirm_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderConfirm_orderConfirm_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderConfirm_orderConfirm_order_lines_unitPrice | null;
+  unitPrice: OrderConfirm_orderConfirm_order_lines_unitPrice;
   thumbnail: OrderConfirm_orderConfirm_order_lines_thumbnail | null;
 }
 
@@ -334,24 +334,24 @@ export interface OrderConfirm_orderConfirm_order {
   fulfillments: (OrderConfirm_orderConfirm_order_fulfillments | null)[];
   lines: (OrderConfirm_orderConfirm_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderConfirm_orderConfirm_order_shippingAddress | null;
   shippingMethod: OrderConfirm_orderConfirm_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderConfirm_orderConfirm_order_shippingPrice | null;
+  shippingPrice: OrderConfirm_orderConfirm_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderConfirm_orderConfirm_order_subtotal | null;
+  subtotal: OrderConfirm_orderConfirm_order_subtotal;
-  total: OrderConfirm_orderConfirm_order_total | null;
+  total: OrderConfirm_orderConfirm_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderConfirm_orderConfirm_order_totalAuthorized | null;
+  totalAuthorized: OrderConfirm_orderConfirm_order_totalAuthorized;
-  totalCaptured: OrderConfirm_orderConfirm_order_totalCaptured | null;
+  totalCaptured: OrderConfirm_orderConfirm_order_totalCaptured;
   user: OrderConfirm_orderConfirm_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderConfirm_orderConfirm_order_availableShippingMethods | null)[] | null;
   discount: OrderConfirm_orderConfirm_order_discount | null;
   invoices: (OrderConfirm_orderConfirm_order_invoices | null)[] | null;
   channel: OrderConfirm_orderConfirm_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderConfirm_orderConfirm {

src/orders/types/OrderDetails.ts

@@ -125,7 +125,7 @@ export interface OrderDetails_order_fulfillments_lines_orderLine {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderDetails_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderDetails_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderDetails_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -190,7 +190,7 @@ export interface OrderDetails_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderDetails_order_lines_unitPrice | null;
+  unitPrice: OrderDetails_order_lines_unitPrice;
   thumbnail: OrderDetails_order_lines_thumbnail | null;
 }
 
@@ -328,24 +328,24 @@ export interface OrderDetails_order {
   fulfillments: (OrderDetails_order_fulfillments | null)[];
   lines: (OrderDetails_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderDetails_order_shippingAddress | null;
   shippingMethod: OrderDetails_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderDetails_order_shippingPrice | null;
+  shippingPrice: OrderDetails_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderDetails_order_subtotal | null;
+  subtotal: OrderDetails_order_subtotal;
-  total: OrderDetails_order_total | null;
+  total: OrderDetails_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderDetails_order_totalAuthorized | null;
+  totalAuthorized: OrderDetails_order_totalAuthorized;
-  totalCaptured: OrderDetails_order_totalCaptured | null;
+  totalCaptured: OrderDetails_order_totalCaptured;
   user: OrderDetails_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderDetails_order_availableShippingMethods | null)[] | null;
   discount: OrderDetails_order_discount | null;
   invoices: (OrderDetails_order_invoices | null)[] | null;
   channel: OrderDetails_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderDetails_shop_countries {

src/orders/types/OrderDraftCancel.ts

@@ -131,7 +131,7 @@ export interface OrderDraftCancel_draftOrderDelete_order_fulfillments_lines_orde
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderDraftCancel_draftOrderDelete_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderDraftCancel_draftOrderDelete_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderDraftCancel_draftOrderDelete_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderDraftCancel_draftOrderDelete_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderDraftCancel_draftOrderDelete_order_lines_unitPrice | null;
+  unitPrice: OrderDraftCancel_draftOrderDelete_order_lines_unitPrice;
   thumbnail: OrderDraftCancel_draftOrderDelete_order_lines_thumbnail | null;
 }
 
@@ -334,24 +334,24 @@ export interface OrderDraftCancel_draftOrderDelete_order {
   fulfillments: (OrderDraftCancel_draftOrderDelete_order_fulfillments | null)[];
   lines: (OrderDraftCancel_draftOrderDelete_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderDraftCancel_draftOrderDelete_order_shippingAddress | null;
   shippingMethod: OrderDraftCancel_draftOrderDelete_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderDraftCancel_draftOrderDelete_order_shippingPrice | null;
+  shippingPrice: OrderDraftCancel_draftOrderDelete_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderDraftCancel_draftOrderDelete_order_subtotal | null;
+  subtotal: OrderDraftCancel_draftOrderDelete_order_subtotal;
-  total: OrderDraftCancel_draftOrderDelete_order_total | null;
+  total: OrderDraftCancel_draftOrderDelete_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderDraftCancel_draftOrderDelete_order_totalAuthorized | null;
+  totalAuthorized: OrderDraftCancel_draftOrderDelete_order_totalAuthorized;
-  totalCaptured: OrderDraftCancel_draftOrderDelete_order_totalCaptured | null;
+  totalCaptured: OrderDraftCancel_draftOrderDelete_order_totalCaptured;
   user: OrderDraftCancel_draftOrderDelete_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderDraftCancel_draftOrderDelete_order_availableShippingMethods | null)[] | null;
   discount: OrderDraftCancel_draftOrderDelete_order_discount | null;
   invoices: (OrderDraftCancel_draftOrderDelete_order_invoices | null)[] | null;
   channel: OrderDraftCancel_draftOrderDelete_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderDraftCancel_draftOrderDelete {

src/orders/types/OrderDraftFinalize.ts

@@ -131,7 +131,7 @@ export interface OrderDraftFinalize_draftOrderComplete_order_fulfillments_lines_
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderDraftFinalize_draftOrderComplete_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderDraftFinalize_draftOrderComplete_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderDraftFinalize_draftOrderComplete_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderDraftFinalize_draftOrderComplete_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderDraftFinalize_draftOrderComplete_order_lines_unitPrice | null;
+  unitPrice: OrderDraftFinalize_draftOrderComplete_order_lines_unitPrice;
   thumbnail: OrderDraftFinalize_draftOrderComplete_order_lines_thumbnail | null;
 }
 
@@ -334,24 +334,24 @@ export interface OrderDraftFinalize_draftOrderComplete_order {
   fulfillments: (OrderDraftFinalize_draftOrderComplete_order_fulfillments | null)[];
   lines: (OrderDraftFinalize_draftOrderComplete_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderDraftFinalize_draftOrderComplete_order_shippingAddress | null;
   shippingMethod: OrderDraftFinalize_draftOrderComplete_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderDraftFinalize_draftOrderComplete_order_shippingPrice | null;
+  shippingPrice: OrderDraftFinalize_draftOrderComplete_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderDraftFinalize_draftOrderComplete_order_subtotal | null;
+  subtotal: OrderDraftFinalize_draftOrderComplete_order_subtotal;
-  total: OrderDraftFinalize_draftOrderComplete_order_total | null;
+  total: OrderDraftFinalize_draftOrderComplete_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderDraftFinalize_draftOrderComplete_order_totalAuthorized | null;
+  totalAuthorized: OrderDraftFinalize_draftOrderComplete_order_totalAuthorized;
-  totalCaptured: OrderDraftFinalize_draftOrderComplete_order_totalCaptured | null;
+  totalCaptured: OrderDraftFinalize_draftOrderComplete_order_totalCaptured;
   user: OrderDraftFinalize_draftOrderComplete_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderDraftFinalize_draftOrderComplete_order_availableShippingMethods | null)[] | null;
   discount: OrderDraftFinalize_draftOrderComplete_order_discount | null;
   invoices: (OrderDraftFinalize_draftOrderComplete_order_invoices | null)[] | null;
   channel: OrderDraftFinalize_draftOrderComplete_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderDraftFinalize_draftOrderComplete {

src/orders/types/OrderDraftList.ts

@@ -47,9 +47,9 @@ export interface OrderDraftList_draftOrders_edges_node {
   created: any;
   id: string;
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   status: OrderStatus;
-  total: OrderDraftList_draftOrders_edges_node_total | null;
+  total: OrderDraftList_draftOrders_edges_node_total;
   userEmail: string | null;
 }
 

src/orders/types/OrderDraftUpdate.ts

@@ -131,7 +131,7 @@ export interface OrderDraftUpdate_draftOrderUpdate_order_fulfillments_lines_orde
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderDraftUpdate_draftOrderUpdate_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderDraftUpdate_draftOrderUpdate_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderDraftUpdate_draftOrderUpdate_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderDraftUpdate_draftOrderUpdate_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderDraftUpdate_draftOrderUpdate_order_lines_unitPrice | null;
+  unitPrice: OrderDraftUpdate_draftOrderUpdate_order_lines_unitPrice;
   thumbnail: OrderDraftUpdate_draftOrderUpdate_order_lines_thumbnail | null;
 }
 
@@ -334,24 +334,24 @@ export interface OrderDraftUpdate_draftOrderUpdate_order {
   fulfillments: (OrderDraftUpdate_draftOrderUpdate_order_fulfillments | null)[];
   lines: (OrderDraftUpdate_draftOrderUpdate_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderDraftUpdate_draftOrderUpdate_order_shippingAddress | null;
   shippingMethod: OrderDraftUpdate_draftOrderUpdate_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderDraftUpdate_draftOrderUpdate_order_shippingPrice | null;
+  shippingPrice: OrderDraftUpdate_draftOrderUpdate_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderDraftUpdate_draftOrderUpdate_order_subtotal | null;
+  subtotal: OrderDraftUpdate_draftOrderUpdate_order_subtotal;
-  total: OrderDraftUpdate_draftOrderUpdate_order_total | null;
+  total: OrderDraftUpdate_draftOrderUpdate_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderDraftUpdate_draftOrderUpdate_order_totalAuthorized | null;
+  totalAuthorized: OrderDraftUpdate_draftOrderUpdate_order_totalAuthorized;
-  totalCaptured: OrderDraftUpdate_draftOrderUpdate_order_totalCaptured | null;
+  totalCaptured: OrderDraftUpdate_draftOrderUpdate_order_totalCaptured;
   user: OrderDraftUpdate_draftOrderUpdate_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderDraftUpdate_draftOrderUpdate_order_availableShippingMethods | null)[] | null;
   discount: OrderDraftUpdate_draftOrderUpdate_order_discount | null;
   invoices: (OrderDraftUpdate_draftOrderUpdate_order_invoices | null)[] | null;
   channel: OrderDraftUpdate_draftOrderUpdate_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderDraftUpdate_draftOrderUpdate {

src/orders/types/OrderFulfillmentCancel.ts

@@ -131,7 +131,7 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillment
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderFulfillmentCancel_orderFulfillmentCancel_order_lines_unitPrice | null;
+  unitPrice: OrderFulfillmentCancel_orderFulfillmentCancel_order_lines_unitPrice;
   thumbnail: OrderFulfillmentCancel_orderFulfillmentCancel_order_lines_thumbnail | null;
 }
 
@@ -334,24 +334,24 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_order {
   fulfillments: (OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillments | null)[];
   lines: (OrderFulfillmentCancel_orderFulfillmentCancel_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderFulfillmentCancel_orderFulfillmentCancel_order_shippingAddress | null;
   shippingMethod: OrderFulfillmentCancel_orderFulfillmentCancel_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderFulfillmentCancel_orderFulfillmentCancel_order_shippingPrice | null;
+  shippingPrice: OrderFulfillmentCancel_orderFulfillmentCancel_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderFulfillmentCancel_orderFulfillmentCancel_order_subtotal | null;
+  subtotal: OrderFulfillmentCancel_orderFulfillmentCancel_order_subtotal;
-  total: OrderFulfillmentCancel_orderFulfillmentCancel_order_total | null;
+  total: OrderFulfillmentCancel_orderFulfillmentCancel_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderFulfillmentCancel_orderFulfillmentCancel_order_totalAuthorized | null;
+  totalAuthorized: OrderFulfillmentCancel_orderFulfillmentCancel_order_totalAuthorized;
-  totalCaptured: OrderFulfillmentCancel_orderFulfillmentCancel_order_totalCaptured | null;
+  totalCaptured: OrderFulfillmentCancel_orderFulfillmentCancel_order_totalCaptured;
   user: OrderFulfillmentCancel_orderFulfillmentCancel_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderFulfillmentCancel_orderFulfillmentCancel_order_availableShippingMethods | null)[] | null;
   discount: OrderFulfillmentCancel_orderFulfillmentCancel_order_discount | null;
   invoices: (OrderFulfillmentCancel_orderFulfillmentCancel_order_invoices | null)[] | null;
   channel: OrderFulfillmentCancel_orderFulfillmentCancel_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderFulfillmentCancel_orderFulfillmentCancel {

src/orders/types/OrderFulfillmentRefundProducts.ts

@@ -52,7 +52,7 @@ export interface OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_f
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_fulfillment_lines_orderLine_unitPrice | null;
+  unitPrice: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_fulfillment_lines_orderLine_unitPrice;
   thumbnail: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_fulfillment_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_o
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -261,7 +261,7 @@ export interface OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_o
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_lines_unitPrice | null;
+  unitPrice: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_lines_unitPrice;
   thumbnail: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_lines_thumbnail | null;
 }
 
@@ -399,24 +399,24 @@ export interface OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_o
   fulfillments: (OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_fulfillments | null)[];
   lines: (OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_shippingAddress | null;
   shippingMethod: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_shippingPrice | null;
+  shippingPrice: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_subtotal | null;
+  subtotal: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_subtotal;
-  total: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_total | null;
+  total: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_totalAuthorized | null;
+  totalAuthorized: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_totalAuthorized;
-  totalCaptured: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_totalCaptured | null;
+  totalCaptured: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_totalCaptured;
   user: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_availableShippingMethods | null)[] | null;
   discount: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_discount | null;
   invoices: (OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_invoices | null)[] | null;
   channel: OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts {

src/orders/types/OrderFulfillmentUpdateTracking.ts

@@ -131,7 +131,7 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_o
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_o
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_lines_unitPrice | null;
+  unitPrice: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_lines_unitPrice;
   thumbnail: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_lines_thumbnail | null;
 }
 
@@ -334,24 +334,24 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_o
   fulfillments: (OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_fulfillments | null)[];
   lines: (OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_shippingAddress | null;
   shippingMethod: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_shippingPrice | null;
+  shippingPrice: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_subtotal | null;
+  subtotal: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_subtotal;
-  total: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_total | null;
+  total: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_totalAuthorized | null;
+  totalAuthorized: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_totalAuthorized;
-  totalCaptured: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_totalCaptured | null;
+  totalCaptured: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_totalCaptured;
   user: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_availableShippingMethods | null)[] | null;
   discount: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_discount | null;
   invoices: (OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_invoices | null)[] | null;
   channel: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking {

src/orders/types/OrderLineDelete.ts

@@ -131,7 +131,7 @@ export interface OrderLineDelete_draftOrderLineDelete_order_fulfillments_lines_o
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderLineDelete_draftOrderLineDelete_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderLineDelete_draftOrderLineDelete_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderLineDelete_draftOrderLineDelete_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderLineDelete_draftOrderLineDelete_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderLineDelete_draftOrderLineDelete_order_lines_unitPrice | null;
+  unitPrice: OrderLineDelete_draftOrderLineDelete_order_lines_unitPrice;
   thumbnail: OrderLineDelete_draftOrderLineDelete_order_lines_thumbnail | null;
 }
 
@@ -334,24 +334,24 @@ export interface OrderLineDelete_draftOrderLineDelete_order {
   fulfillments: (OrderLineDelete_draftOrderLineDelete_order_fulfillments | null)[];
   lines: (OrderLineDelete_draftOrderLineDelete_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderLineDelete_draftOrderLineDelete_order_shippingAddress | null;
   shippingMethod: OrderLineDelete_draftOrderLineDelete_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderLineDelete_draftOrderLineDelete_order_shippingPrice | null;
+  shippingPrice: OrderLineDelete_draftOrderLineDelete_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderLineDelete_draftOrderLineDelete_order_subtotal | null;
+  subtotal: OrderLineDelete_draftOrderLineDelete_order_subtotal;
-  total: OrderLineDelete_draftOrderLineDelete_order_total | null;
+  total: OrderLineDelete_draftOrderLineDelete_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderLineDelete_draftOrderLineDelete_order_totalAuthorized | null;
+  totalAuthorized: OrderLineDelete_draftOrderLineDelete_order_totalAuthorized;
-  totalCaptured: OrderLineDelete_draftOrderLineDelete_order_totalCaptured | null;
+  totalCaptured: OrderLineDelete_draftOrderLineDelete_order_totalCaptured;
   user: OrderLineDelete_draftOrderLineDelete_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderLineDelete_draftOrderLineDelete_order_availableShippingMethods | null)[] | null;
   discount: OrderLineDelete_draftOrderLineDelete_order_discount | null;
   invoices: (OrderLineDelete_draftOrderLineDelete_order_invoices | null)[] | null;
   channel: OrderLineDelete_draftOrderLineDelete_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderLineDelete_draftOrderLineDelete {

src/orders/types/OrderLineUpdate.ts

@@ -131,7 +131,7 @@ export interface OrderLineUpdate_draftOrderLineUpdate_order_fulfillments_lines_o
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderLineUpdate_draftOrderLineUpdate_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderLineUpdate_draftOrderLineUpdate_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderLineUpdate_draftOrderLineUpdate_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderLineUpdate_draftOrderLineUpdate_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderLineUpdate_draftOrderLineUpdate_order_lines_unitPrice | null;
+  unitPrice: OrderLineUpdate_draftOrderLineUpdate_order_lines_unitPrice;
   thumbnail: OrderLineUpdate_draftOrderLineUpdate_order_lines_thumbnail | null;
 }
 
@@ -334,24 +334,24 @@ export interface OrderLineUpdate_draftOrderLineUpdate_order {
   fulfillments: (OrderLineUpdate_draftOrderLineUpdate_order_fulfillments | null)[];
   lines: (OrderLineUpdate_draftOrderLineUpdate_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderLineUpdate_draftOrderLineUpdate_order_shippingAddress | null;
   shippingMethod: OrderLineUpdate_draftOrderLineUpdate_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderLineUpdate_draftOrderLineUpdate_order_shippingPrice | null;
+  shippingPrice: OrderLineUpdate_draftOrderLineUpdate_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderLineUpdate_draftOrderLineUpdate_order_subtotal | null;
+  subtotal: OrderLineUpdate_draftOrderLineUpdate_order_subtotal;
-  total: OrderLineUpdate_draftOrderLineUpdate_order_total | null;
+  total: OrderLineUpdate_draftOrderLineUpdate_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderLineUpdate_draftOrderLineUpdate_order_totalAuthorized | null;
+  totalAuthorized: OrderLineUpdate_draftOrderLineUpdate_order_totalAuthorized;
-  totalCaptured: OrderLineUpdate_draftOrderLineUpdate_order_totalCaptured | null;
+  totalCaptured: OrderLineUpdate_draftOrderLineUpdate_order_totalCaptured;
   user: OrderLineUpdate_draftOrderLineUpdate_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderLineUpdate_draftOrderLineUpdate_order_availableShippingMethods | null)[] | null;
   discount: OrderLineUpdate_draftOrderLineUpdate_order_discount | null;
   invoices: (OrderLineUpdate_draftOrderLineUpdate_order_invoices | null)[] | null;
   channel: OrderLineUpdate_draftOrderLineUpdate_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderLineUpdate_draftOrderLineUpdate {

src/orders/types/OrderLinesAdd.ts

@@ -131,7 +131,7 @@ export interface OrderLinesAdd_draftOrderLinesCreate_order_fulfillments_lines_or
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderLinesAdd_draftOrderLinesCreate_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderLinesAdd_draftOrderLinesCreate_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderLinesAdd_draftOrderLinesCreate_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderLinesAdd_draftOrderLinesCreate_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderLinesAdd_draftOrderLinesCreate_order_lines_unitPrice | null;
+  unitPrice: OrderLinesAdd_draftOrderLinesCreate_order_lines_unitPrice;
   thumbnail: OrderLinesAdd_draftOrderLinesCreate_order_lines_thumbnail | null;
 }
 
@@ -334,24 +334,24 @@ export interface OrderLinesAdd_draftOrderLinesCreate_order {
   fulfillments: (OrderLinesAdd_draftOrderLinesCreate_order_fulfillments | null)[];
   lines: (OrderLinesAdd_draftOrderLinesCreate_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderLinesAdd_draftOrderLinesCreate_order_shippingAddress | null;
   shippingMethod: OrderLinesAdd_draftOrderLinesCreate_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderLinesAdd_draftOrderLinesCreate_order_shippingPrice | null;
+  shippingPrice: OrderLinesAdd_draftOrderLinesCreate_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderLinesAdd_draftOrderLinesCreate_order_subtotal | null;
+  subtotal: OrderLinesAdd_draftOrderLinesCreate_order_subtotal;
-  total: OrderLinesAdd_draftOrderLinesCreate_order_total | null;
+  total: OrderLinesAdd_draftOrderLinesCreate_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderLinesAdd_draftOrderLinesCreate_order_totalAuthorized | null;
+  totalAuthorized: OrderLinesAdd_draftOrderLinesCreate_order_totalAuthorized;
-  totalCaptured: OrderLinesAdd_draftOrderLinesCreate_order_totalCaptured | null;
+  totalCaptured: OrderLinesAdd_draftOrderLinesCreate_order_totalCaptured;
   user: OrderLinesAdd_draftOrderLinesCreate_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderLinesAdd_draftOrderLinesCreate_order_availableShippingMethods | null)[] | null;
   discount: OrderLinesAdd_draftOrderLinesCreate_order_discount | null;
   invoices: (OrderLinesAdd_draftOrderLinesCreate_order_invoices | null)[] | null;
   channel: OrderLinesAdd_draftOrderLinesCreate_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderLinesAdd_draftOrderLinesCreate {

src/orders/types/OrderList.ts

@@ -47,9 +47,9 @@ export interface OrderList_orders_edges_node {
   created: any;
   id: string;
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   status: OrderStatus;
-  total: OrderList_orders_edges_node_total | null;
+  total: OrderList_orders_edges_node_total;
   userEmail: string | null;
 }
 

src/orders/types/OrderMarkAsPaid.ts

@@ -131,7 +131,7 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments_lines_orderL
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderMarkAsPaid_orderMarkAsPaid_order_lines_unitPrice | null;
+  unitPrice: OrderMarkAsPaid_orderMarkAsPaid_order_lines_unitPrice;
   thumbnail: OrderMarkAsPaid_orderMarkAsPaid_order_lines_thumbnail | null;
 }
 
@@ -334,24 +334,24 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_order {
   fulfillments: (OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments | null)[];
   lines: (OrderMarkAsPaid_orderMarkAsPaid_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderMarkAsPaid_orderMarkAsPaid_order_shippingAddress | null;
   shippingMethod: OrderMarkAsPaid_orderMarkAsPaid_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderMarkAsPaid_orderMarkAsPaid_order_shippingPrice | null;
+  shippingPrice: OrderMarkAsPaid_orderMarkAsPaid_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderMarkAsPaid_orderMarkAsPaid_order_subtotal | null;
+  subtotal: OrderMarkAsPaid_orderMarkAsPaid_order_subtotal;
-  total: OrderMarkAsPaid_orderMarkAsPaid_order_total | null;
+  total: OrderMarkAsPaid_orderMarkAsPaid_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderMarkAsPaid_orderMarkAsPaid_order_totalAuthorized | null;
+  totalAuthorized: OrderMarkAsPaid_orderMarkAsPaid_order_totalAuthorized;
-  totalCaptured: OrderMarkAsPaid_orderMarkAsPaid_order_totalCaptured | null;
+  totalCaptured: OrderMarkAsPaid_orderMarkAsPaid_order_totalCaptured;
   user: OrderMarkAsPaid_orderMarkAsPaid_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderMarkAsPaid_orderMarkAsPaid_order_availableShippingMethods | null)[] | null;
   discount: OrderMarkAsPaid_orderMarkAsPaid_order_discount | null;
   invoices: (OrderMarkAsPaid_orderMarkAsPaid_order_invoices | null)[] | null;
   channel: OrderMarkAsPaid_orderMarkAsPaid_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderMarkAsPaid_orderMarkAsPaid {

src/orders/types/OrderRefund.ts

@@ -131,7 +131,7 @@ export interface OrderRefund_orderRefund_order_fulfillments_lines_orderLine {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderRefund_orderRefund_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderRefund_orderRefund_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderRefund_orderRefund_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderRefund_orderRefund_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderRefund_orderRefund_order_lines_unitPrice | null;
+  unitPrice: OrderRefund_orderRefund_order_lines_unitPrice;
   thumbnail: OrderRefund_orderRefund_order_lines_thumbnail | null;
 }
 
@@ -334,24 +334,24 @@ export interface OrderRefund_orderRefund_order {
   fulfillments: (OrderRefund_orderRefund_order_fulfillments | null)[];
   lines: (OrderRefund_orderRefund_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderRefund_orderRefund_order_shippingAddress | null;
   shippingMethod: OrderRefund_orderRefund_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderRefund_orderRefund_order_shippingPrice | null;
+  shippingPrice: OrderRefund_orderRefund_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderRefund_orderRefund_order_subtotal | null;
+  subtotal: OrderRefund_orderRefund_order_subtotal;
-  total: OrderRefund_orderRefund_order_total | null;
+  total: OrderRefund_orderRefund_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderRefund_orderRefund_order_totalAuthorized | null;
+  totalAuthorized: OrderRefund_orderRefund_order_totalAuthorized;
-  totalCaptured: OrderRefund_orderRefund_order_totalCaptured | null;
+  totalCaptured: OrderRefund_orderRefund_order_totalCaptured;
   user: OrderRefund_orderRefund_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderRefund_orderRefund_order_availableShippingMethods | null)[] | null;
   discount: OrderRefund_orderRefund_order_discount | null;
   invoices: (OrderRefund_orderRefund_order_invoices | null)[] | null;
   channel: OrderRefund_orderRefund_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderRefund_orderRefund {

src/orders/types/OrderRefundData.ts

@@ -57,7 +57,7 @@ export interface OrderRefundData_order_lines {
   id: string;
   productName: string;
   quantity: number;
-  unitPrice: OrderRefundData_order_lines_unitPrice | null;
+  unitPrice: OrderRefundData_order_lines_unitPrice;
   thumbnail: OrderRefundData_order_lines_thumbnail | null;
   quantityFulfilled: number;
 }
@@ -83,7 +83,7 @@ export interface OrderRefundData_order_fulfillments_lines_orderLine {
   id: string;
   productName: string;
   quantity: number;
-  unitPrice: OrderRefundData_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderRefundData_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderRefundData_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -106,9 +106,9 @@ export interface OrderRefundData_order {
   __typename: "Order";
   id: string;
   number: string | null;
-  total: OrderRefundData_order_total | null;
+  total: OrderRefundData_order_total;
-  totalCaptured: OrderRefundData_order_totalCaptured | null;
+  totalCaptured: OrderRefundData_order_totalCaptured;
-  shippingPrice: OrderRefundData_order_shippingPrice | null;
+  shippingPrice: OrderRefundData_order_shippingPrice;
   lines: (OrderRefundData_order_lines | null)[];
   fulfillments: (OrderRefundData_order_fulfillments | null)[];
 }

src/orders/types/OrderShippingMethodUpdate.ts

@@ -50,7 +50,7 @@ export interface OrderShippingMethodUpdate_orderUpdateShipping_order {
   id: string;
   shippingMethod: OrderShippingMethodUpdate_orderUpdateShipping_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderShippingMethodUpdate_orderUpdateShipping_order_shippingPrice | null;
+  shippingPrice: OrderShippingMethodUpdate_orderUpdateShipping_order_shippingPrice;
 }
 
 export interface OrderShippingMethodUpdate_orderUpdateShipping {

src/orders/types/OrderUpdate.ts

@@ -131,7 +131,7 @@ export interface OrderUpdate_orderUpdate_order_fulfillments_lines_orderLine {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderUpdate_orderUpdate_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderUpdate_orderUpdate_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderUpdate_orderUpdate_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderUpdate_orderUpdate_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderUpdate_orderUpdate_order_lines_unitPrice | null;
+  unitPrice: OrderUpdate_orderUpdate_order_lines_unitPrice;
   thumbnail: OrderUpdate_orderUpdate_order_lines_thumbnail | null;
 }
 
@@ -334,24 +334,24 @@ export interface OrderUpdate_orderUpdate_order {
   fulfillments: (OrderUpdate_orderUpdate_order_fulfillments | null)[];
   lines: (OrderUpdate_orderUpdate_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderUpdate_orderUpdate_order_shippingAddress | null;
   shippingMethod: OrderUpdate_orderUpdate_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderUpdate_orderUpdate_order_shippingPrice | null;
+  shippingPrice: OrderUpdate_orderUpdate_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderUpdate_orderUpdate_order_subtotal | null;
+  subtotal: OrderUpdate_orderUpdate_order_subtotal;
-  total: OrderUpdate_orderUpdate_order_total | null;
+  total: OrderUpdate_orderUpdate_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderUpdate_orderUpdate_order_totalAuthorized | null;
+  totalAuthorized: OrderUpdate_orderUpdate_order_totalAuthorized;
-  totalCaptured: OrderUpdate_orderUpdate_order_totalCaptured | null;
+  totalCaptured: OrderUpdate_orderUpdate_order_totalCaptured;
   user: OrderUpdate_orderUpdate_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderUpdate_orderUpdate_order_availableShippingMethods | null)[] | null;
   discount: OrderUpdate_orderUpdate_order_discount | null;
   invoices: (OrderUpdate_orderUpdate_order_invoices | null)[] | null;
   channel: OrderUpdate_orderUpdate_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderUpdate_orderUpdate {

src/orders/types/OrderVoid.ts

@@ -131,7 +131,7 @@ export interface OrderVoid_orderVoid_order_fulfillments_lines_orderLine {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderVoid_orderVoid_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: OrderVoid_orderVoid_order_fulfillments_lines_orderLine_unitPrice;
   thumbnail: OrderVoid_orderVoid_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
@@ -196,7 +196,7 @@ export interface OrderVoid_orderVoid_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: OrderVoid_orderVoid_order_lines_unitPrice | null;
+  unitPrice: OrderVoid_orderVoid_order_lines_unitPrice;
   thumbnail: OrderVoid_orderVoid_order_lines_thumbnail | null;
 }
 
@@ -334,24 +334,24 @@ export interface OrderVoid_orderVoid_order {
   fulfillments: (OrderVoid_orderVoid_order_fulfillments | null)[];
   lines: (OrderVoid_orderVoid_order_lines | null)[];
   number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
+  paymentStatus: PaymentChargeStatusEnum;
   shippingAddress: OrderVoid_orderVoid_order_shippingAddress | null;
   shippingMethod: OrderVoid_orderVoid_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: OrderVoid_orderVoid_order_shippingPrice | null;
+  shippingPrice: OrderVoid_orderVoid_order_shippingPrice;
   status: OrderStatus;
-  subtotal: OrderVoid_orderVoid_order_subtotal | null;
+  subtotal: OrderVoid_orderVoid_order_subtotal;
-  total: OrderVoid_orderVoid_order_total | null;
+  total: OrderVoid_orderVoid_order_total;
   actions: (OrderAction | null)[];
-  totalAuthorized: OrderVoid_orderVoid_order_totalAuthorized | null;
+  totalAuthorized: OrderVoid_orderVoid_order_totalAuthorized;
-  totalCaptured: OrderVoid_orderVoid_order_totalCaptured | null;
+  totalCaptured: OrderVoid_orderVoid_order_totalCaptured;
   user: OrderVoid_orderVoid_order_user | null;
   userEmail: string | null;
   availableShippingMethods: (OrderVoid_orderVoid_order_availableShippingMethods | null)[] | null;
   discount: OrderVoid_orderVoid_order_discount | null;
   invoices: (OrderVoid_orderVoid_order_invoices | null)[] | null;
   channel: OrderVoid_orderVoid_order_channel;
-  isPaid: boolean | null;
+  isPaid: boolean;
 }
 
 export interface OrderVoid_orderVoid {

src/products/components/ProductExportDialog/ProductExportDialog.tsx

@@ -4,12 +4,12 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import Typography from "@material-ui/core/Typography";
-import { Channels_channels } from "@saleor/channels/types/Channels";
 import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import makeCreatorSteps, { Step } from "@saleor/components/CreatorSteps";
 import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
+import { ChannelFragment } from "@saleor/fragments/types/ChannelFragment";
 import { ExportErrorFragment } from "@saleor/fragments/types/ExportErrorFragment";
 import useForm, { FormChange } from "@saleor/hooks/useForm";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
@@ -79,7 +79,7 @@ const ProductExportSteps = makeCreatorSteps<ProductExportStep>();
 
 export interface ProductExportDialogProps extends DialogProps, FetchMoreProps {
   attributes: SearchAttributes_search_edges_node[];
-  channels: Channels_channels[];
+  channels: ChannelFragment[];
   confirmButtonState: ConfirmButtonTransitionState;
   errors: ExportErrorFragment[];
   productQuantity: ProductQuantity;
@@ -146,7 +146,7 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
     );
   };
 
-  const handleChannelSelect = (option: Channels_channels) => {
+  const handleChannelSelect = (option: ChannelFragment) => {
     change({
       target: {
         name: "exportInfo",
@@ -168,7 +168,7 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
   };
 
   const handleToggleAllChannels = (
-    items: Channels_channels[],
+    items: ChannelFragment[],
     selected: number
   ) => {
     setSelectedChannels(selected === items.length ? [] : channels);

src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx

@@ -4,13 +4,13 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
 import makeStyles from "@material-ui/core/styles/makeStyles";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
-import { Channels_channels } from "@saleor/channels/types/Channels";
 import Accordion, { AccordionProps } from "@saleor/components/Accordion";
 import ChannelsAvailabilityContent from "@saleor/components/ChannelsAvailabilityContent";
 import Checkbox from "@saleor/components/Checkbox";
 import Chip from "@saleor/components/Chip";
 import Hr from "@saleor/components/Hr";
 import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
+import { ChannelFragment } from "@saleor/fragments/types/ChannelFragment";
 import { ChangeEvent, FormChange } from "@saleor/hooks/useForm";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { sectionNames } from "@saleor/intl";
@@ -207,8 +207,8 @@ const FieldAccordion: React.FC<AccordionProps & {
 
 export interface ProductExportDialogInfoProps extends FetchMoreProps {
   attributes: MultiAutocompleteChoiceType[];
-  channels: Channels_channels[];
+  channels: ChannelFragment[];
-  selectedChannels: Channels_channels[];
+  selectedChannels: ChannelFragment[];
   warehouses: MultiAutocompleteChoiceType[];
   data: ExportProductsInput;
   selectedAttributes: MultiAutocompleteChoiceType[];
@@ -217,8 +217,8 @@ export interface ProductExportDialogInfoProps extends FetchMoreProps {
   onChange: FormChange;
   onFetch: (query: string) => void;
   onSelectAllWarehouses: FormChange;
-  onSelectAllChannels: (items: Channels_channels[], selected: number) => void;
+  onSelectAllChannels: (items: ChannelFragment[], selected: number) => void;
-  onChannelSelect: (option: Channels_channels) => void;
+  onChannelSelect: (option: ChannelFragment) => void;
 }
 
 const ProductExportDialogInfo: React.FC<ProductExportDialogInfoProps> = ({

src/products/views/ProductList/ProductList.tsx

@@ -224,8 +224,9 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
     );
 
   const paginationState = createPaginationState(settings.rowNumber, params);
-  const filter = !noChannel ? getFilterVariables(params, channel.slug) : null;
+  const channelSlug = noChannel ? null : channel.slug;
-  const sort = !noChannel ? getSortQueryVariables(params, channel.slug) : null;
+  const filter = getFilterVariables(params, channelSlug);
+  const sort = getSortQueryVariables(params, channelSlug);
   const queryVariables = React.useMemo<ProductListVariables>(
     () => ({
       ...paginationState,

src/storybook/UserDecorator.tsx

@@ -6,8 +6,10 @@ export const UserDecorator = (user: User) => storyFn => (
   <UserContext.Provider
     value={{
       login: undefined,
+      loginByExternalPlugin: undefined,
       loginByToken: undefined,
       logout: undefined,
+      requestLoginByExternalPlugin: undefined,
       tokenAuthLoading: false,
       tokenRefresh: undefined,
       tokenVerifyLoading: false,

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -36858,6 +36858,165 @@ exports[`Storyshots Views / Authentication / Log in default 1`] = `
         <div
           class="FormSpacer-spacer-id"
         />
+        <div
+          class="LoginCard-buttonContainer-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id LoginCard-loginButton-id MuiButton-containedPrimary-id"
+            data-test="submit"
+            tabindex="0"
+            type="submit"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Login
+            </span>
+          </button>
+        </div>
+        <div
+          class="FormSpacer-spacer-id"
+        />
+        <div
+          class="MuiTypography-root-id MuiTypography-body1-id"
+        >
+          Forgot password? 
+          <a
+            class="LoginCard-link-id"
+          >
+            Use this link to recover it
+          </a>
+        </div>
+        <div
+          class="FormSpacer-spacer-id"
+        />
+        <hr
+          class="MuiDivider-root-id"
+        />
+        <div
+          class="FormSpacer-spacer-id"
+        />
+        <div
+          class="MuiTypography-root-id MuiTypography-body1-id"
+        >
+          or login using
+        </div>
+        <div
+          class="FormSpacer-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeLarge-id MuiButton-sizeLarge-id MuiButton-fullWidth-id"
+          data-test="external-authentication"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Example auth plugin
+          </span>
+        </button>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Authentication / Log in disabled 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+    style="margin:auto;overflow:visible;position:relative;width:400px"
+  >
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <form>
+        <div
+          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+        >
+          <label
+            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
+            data-shrink="false"
+          >
+            E-mail Address
+          </label>
+          <div
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+          >
+            <input
+              aria-invalid="false"
+              autocomplete="username"
+              autofocus=""
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+              data-test="email"
+              disabled=""
+              name="email"
+              type="text"
+              value=""
+            />
+            <fieldset
+              aria-hidden="true"
+              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+              style="padding-left:8px"
+            >
+              <legend
+                class="PrivateNotchedOutline-legend-id"
+                style="width:0.01px"
+              >
+                <span>
+                  ​
+                </span>
+              </legend>
+            </fieldset>
+          </div>
+        </div>
+        <div
+          class="FormSpacer-spacer-id"
+        />
+        <div
+          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+        >
+          <label
+            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
+            data-shrink="false"
+          >
+            Password
+          </label>
+          <div
+            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+          >
+            <input
+              aria-invalid="false"
+              autocomplete="password"
+              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+              data-test="password"
+              disabled=""
+              name="password"
+              type="password"
+              value=""
+            />
+            <fieldset
+              aria-hidden="true"
+              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+              style="padding-left:8px"
+            >
+              <legend
+                class="PrivateNotchedOutline-legend-id"
+                style="width:0.01px"
+              >
+                <span>
+                  ​
+                </span>
+              </legend>
+            </fieldset>
+          </div>
+        </div>
+        <div
+          class="FormSpacer-spacer-id"
+        />
         <div
           class="LoginCard-buttonContainer-id"
         >
@@ -36879,10 +37038,45 @@ exports[`Storyshots Views / Authentication / Log in default 1`] = `
           class="FormSpacer-spacer-id"
         />
         <div
-          class="MuiTypography-root-id LoginCard-link-id MuiTypography-body1-id"
+          class="MuiTypography-root-id MuiTypography-body1-id"
         >
-          Reset your password
+          Forgot password? 
+          <a
+            class="LoginCard-link-id"
+          >
+            Use this link to recover it
+          </a>
         </div>
+        <div
+          class="FormSpacer-spacer-id"
+        />
+        <hr
+          class="MuiDivider-root-id"
+        />
+        <div
+          class="FormSpacer-spacer-id"
+        />
+        <div
+          class="MuiTypography-root-id MuiTypography-body1-id"
+        >
+          or login using
+        </div>
+        <div
+          class="FormSpacer-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeLarge-id MuiButton-sizeLarge-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
+          data-test="external-authentication"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Example auth plugin
+          </span>
+        </button>
       </form>
     </div>
   </div>
@@ -36996,10 +37190,9 @@ exports[`Storyshots Views / Authentication / Log in error 1`] = `
           class="LoginCard-buttonContainer-id"
         >
           <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id LoginCard-loginButton-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id LoginCard-loginButton-id MuiButton-containedPrimary-id"
             data-test="submit"
-            disabled=""
+            tabindex="0"
-            tabindex="-1"
             type="submit"
           >
             <span
@@ -37013,10 +37206,44 @@ exports[`Storyshots Views / Authentication / Log in error 1`] = `
           class="FormSpacer-spacer-id"
         />
         <div
-          class="MuiTypography-root-id LoginCard-link-id MuiTypography-body1-id"
+          class="MuiTypography-root-id MuiTypography-body1-id"
         >
-          Reset your password
+          Forgot password? 
+          <a
+            class="LoginCard-link-id"
+          >
+            Use this link to recover it
+          </a>
         </div>
+        <div
+          class="FormSpacer-spacer-id"
+        />
+        <hr
+          class="MuiDivider-root-id"
+        />
+        <div
+          class="FormSpacer-spacer-id"
+        />
+        <div
+          class="MuiTypography-root-id MuiTypography-body1-id"
+        >
+          or login using
+        </div>
+        <div
+          class="FormSpacer-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeLarge-id MuiButton-sizeLarge-id MuiButton-fullWidth-id"
+          data-test="external-authentication"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Example auth plugin
+          </span>
+        </button>
       </form>
     </div>
   </div>
@@ -37034,114 +37261,29 @@ exports[`Storyshots Views / Authentication / Log in loading 1`] = `
     <div
       class="MuiCardContent-root-id"
     >
-      <form>
       <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+        class="LoginCard-loading-id"
       >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-            data-shrink="false"
-          >
-            E-mail Address
-          </label>
         <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+          class="MuiCircularProgress-root-id MuiCircularProgress-colorPrimary-id MuiCircularProgress-indeterminate-id"
+          role="progressbar"
+          style="width:128px;height:128px"
         >
-            <input
+          <svg
-              aria-invalid="false"
+            class="MuiCircularProgress-svg-id"
-              autocomplete="username"
+            viewBox="22 22 44 44"
-              autofocus=""
+          >
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+            <circle
-              data-test="email"
+              class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-              name="email"
+              cx="44"
-              type="text"
+              cy="44"
-              value=""
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
             />
-            <fieldset
+          </svg>
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              style="padding-left:8px"
-            >
-              <legend
-                class="PrivateNotchedOutline-legend-id"
-                style="width:0.01px"
-              >
-                <span>
-                  ​
-                </span>
-              </legend>
-            </fieldset>
         </div>
       </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-            data-shrink="false"
-          >
-            Password
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              autocomplete="password"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test="password"
-              name="password"
-              type="password"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              style="padding-left:8px"
-            >
-              <legend
-                class="PrivateNotchedOutline-legend-id"
-                style="width:0.01px"
-              >
-                <span>
-                  ​
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="LoginCard-buttonContainer-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id LoginCard-loginButton-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-            data-test="submit"
-            disabled=""
-            tabindex="-1"
-            type="submit"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Login
-            </span>
-          </button>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiTypography-root-id LoginCard-link-id MuiTypography-body1-id"
-        >
-          Reset your password
-        </div>
-      </form>
     </div>
   </div>
 </div>

src/storybook/config.js

@@ -44,10 +44,6 @@ function loadStories() {
   require("./stories/components/WeightRange");
   require("./stories/components/messages");
 
-  // Authentication
-  require("./stories/auth/LoginPage");
-  require("./stories/auth/LoginLoading");
-
   // Attributes
   require("./stories/attributes/AttributeBulkDeleteDialog");
   require("./stories/attributes/AttributeDeleteDialog");

src/types/globalTypes.ts

@@ -1453,8 +1453,7 @@ export interface PageTranslationInput {
   seoTitle?: string | null;
   seoDescription?: string | null;
   title?: string | null;
-  content?: string | null;
+  content?: any | null;
-  contentJson?: any | null;
 }
 
 export interface PageTypeCreateInput {

src/utils/metadata/types/UpdateMetadata.ts

@@ -38,7 +38,7 @@ export interface UpdateMetadata_deleteMetadata_item_privateMetadata {
 }
 
 export interface UpdateMetadata_deleteMetadata_item {
-  __typename: "App" | "ShippingZone" | "ShippingMethod" | "Product" | "ProductType" | "Attribute" | "Category" | "ProductVariant" | "DigitalContent" | "Collection" | "Page" | "PageType" | "MenuItem" | "Menu" | "User" | "Checkout" | "Order" | "Fulfillment" | "Invoice";
+  __typename: "App" | "Warehouse" | "ShippingZone" | "ShippingMethod" | "Product" | "ProductType" | "Attribute" | "Category" | "ProductVariant" | "DigitalContent" | "Collection" | "Page" | "PageType" | "MenuItem" | "Menu" | "User" | "Checkout" | "Order" | "Fulfillment" | "Invoice";
   metadata: (UpdateMetadata_deleteMetadata_item_metadata | null)[];
   privateMetadata: (UpdateMetadata_deleteMetadata_item_privateMetadata | null)[];
   id: string;

src/utils/metadata/types/UpdatePrivateMetadata.ts

@@ -38,7 +38,7 @@ export interface UpdatePrivateMetadata_deletePrivateMetadata_item_privateMetadat
 }
 
 export interface UpdatePrivateMetadata_deletePrivateMetadata_item {
-  __typename: "App" | "ShippingZone" | "ShippingMethod" | "Product" | "ProductType" | "Attribute" | "Category" | "ProductVariant" | "DigitalContent" | "Collection" | "Page" | "PageType" | "MenuItem" | "Menu" | "User" | "Checkout" | "Order" | "Fulfillment" | "Invoice";
+  __typename: "App" | "Warehouse" | "ShippingZone" | "ShippingMethod" | "Product" | "ProductType" | "Attribute" | "Category" | "ProductVariant" | "DigitalContent" | "Collection" | "Page" | "PageType" | "MenuItem" | "Menu" | "User" | "Checkout" | "Order" | "Fulfillment" | "Invoice";
   metadata: (UpdatePrivateMetadata_deletePrivateMetadata_item_metadata | null)[];
   privateMetadata: (UpdatePrivateMetadata_deletePrivateMetadata_item_privateMetadata | null)[];
   id: string;