Saleor 2798 user addresses selection for draft order (#1082)

* Create user addresses select modal

* Prepare user addresses select modal form

* Add user addresses select modal to order draft details page

* Update draft order validation of adresses in edit modal

* Add Customer Change modal

* Update snapshots and messages

* Indication of address form errors by address type

* Refactor addresses submiting

* Refactor address transform functions

* Add data-testids to addresses change dialog

* Update customer address choice style

* Trigger CI

* Update customer addresses edit flow

* Move styles outside of component files

* Refactor after review

* Refactor after review

* Do not update customer if the same selected

* Handle setting adress after edit customer with no addresses

* Trigger CI

CHANGELOG.md

@@ -43,6 +43,7 @@ All notable, unreleased changes to this project will be documented in this file.
   - useFormset.setItemValue wrong updates,
 - Drop deprecated fields - #1071 by @jwm0
 - Add service worker - #1073 by @dominik-zeglen
+- Choosing user shipping and billing addresses for draft order - #1082 by @orzechdev
 
 # 2.11.1
 

locale/defaultMessages.json

@@ -370,10 +370,6 @@
     "context": "product field",
     "string": "Export Variant Weight"
   },
-  "productExportFieldVisibility": {
-    "context": "product field",
-    "string": "Visibility"
-  },
   "productStockHeader": {
     "context": "product stock, section header",
     "string": "Inventory"
@@ -2460,6 +2456,10 @@
     "context": "button",
     "string": "Refresh"
   },
+  "src_dot_continue": {
+    "context": "button",
+    "string": "Continue"
+  },
   "src_dot_create": {
     "context": "button",
     "string": "Create"
@@ -3377,6 +3377,54 @@
     "context": "section header",
     "string": "Sales channel"
   },
+  "src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_billingAddressDescription": {
+    "context": "dialog content",
+    "string": "Add a new address:"
+  },
+  "src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_billingSameAsShipping": {
+    "context": "checkbox label",
+    "string": "Billing address same as shipping address"
+  },
+  "src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_customerAddress": {
+    "context": "address type",
+    "string": "Use one of customer addresses"
+  },
+  "src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_customerBillingAddressDescription": {
+    "context": "dialog content",
+    "string": "Select one of customer addresses or add a new address:"
+  },
+  "src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_customerShippingAddressDescription": {
+    "context": "dialog content",
+    "string": "Which address would you like to use as shipping address for selected customer:"
+  },
+  "src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_newAddress": {
+    "context": "address type",
+    "string": "Add new address"
+  },
+  "src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_shippingAddressDescription": {
+    "context": "dialog content",
+    "string": "This customer doesn’t have any shipping addresses. Provide address for order:"
+  },
+  "src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_title": {
+    "context": "dialog header",
+    "string": "Shipping address for order"
+  },
+  "src_dot_orders_dot_components_dot_OrderCustomerChangeDialog_dot_changeAddress": {
+    "context": "option label",
+    "string": "Change address"
+  },
+  "src_dot_orders_dot_components_dot_OrderCustomerChangeDialog_dot_description": {
+    "context": "dialog description",
+    "string": "You have changed customer assigned to this order. What would you like to do with the shipping address?"
+  },
+  "src_dot_orders_dot_components_dot_OrderCustomerChangeDialog_dot_keepAddress": {
+    "context": "option label",
+    "string": "Keep address"
+  },
+  "src_dot_orders_dot_components_dot_OrderCustomerChangeDialog_dot_title": {
+    "context": "dialog header",
+    "string": "Changed Customer"
+  },
   "src_dot_orders_dot_components_dot_OrderCustomerNote_dot_1505053535": {
     "string": "No notes from customer"
   },
@@ -5802,6 +5850,10 @@
   "src_dot_savedChanges": {
     "string": "Saved changes"
   },
+  "src_dot_select": {
+    "context": "select option, button",
+    "string": "Select"
+  },
   "src_dot_selectAll": {
     "context": "select all options, button",
     "string": "Select All"

schema.graphql

@@ -34,6 +34,7 @@ type AccountError {
   field: String
   message: String
   code: AccountErrorCode!
+  addressType: AddressTypeEnum
 }
 
 enum AccountErrorCode {
@@ -982,6 +983,7 @@ type CheckoutError {
   message: String
   code: CheckoutErrorCode!
   variants: [ID!]
+  addressType: AddressTypeEnum
 }
 
 enum CheckoutErrorCode {
@@ -3105,6 +3107,7 @@ type OrderError {
   warehouse: ID
   orderLine: ID
   variants: [ID!]
+  addressType: AddressTypeEnum
 }
 
 enum OrderErrorCode {
@@ -4198,7 +4201,6 @@ enum ProductFieldEnum {
   DESCRIPTION
   PRODUCT_TYPE
   CATEGORY
-  VISIBLE
   PRODUCT_WEIGHT
   COLLECTIONS
   CHARGE_TAXES
@@ -5305,6 +5307,7 @@ type StaffError {
   field: String
   message: String
   code: AccountErrorCode!
+  addressType: AddressTypeEnum
   permissions: [PermissionEnum!]
   groups: [ID!]
   users: [ID!]

src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx

@@ -20,7 +20,8 @@ storiesOf("Views / Authentication / Set up a new password", module)
       errors={["password"].map(field => ({
         __typename: "AccountError",
         code: AccountErrorCode.PASSWORD_TOO_SHORT,
-        field
+        field,
+        addressType: null
       }))}
       disabled={false}
       onSubmit={() => undefined}

src/auth/types/ExternalAuthenticationUrl.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountErrorCode } from "./../../types/globalTypes";
+import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ExternalAuthenticationUrl
@@ -13,6 +13,7 @@ export interface ExternalAuthenticationUrl_externalAuthenticationUrl_errors {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface ExternalAuthenticationUrl_externalAuthenticationUrl {

src/auth/types/ExternalObtainAccessTokens.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { PermissionEnum, AccountErrorCode } from "./../../types/globalTypes";
+import { PermissionEnum, AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ExternalObtainAccessTokens
@@ -35,6 +35,7 @@ export interface ExternalObtainAccessTokens_externalObtainAccessTokens_errors {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface ExternalObtainAccessTokens_externalObtainAccessTokens {

src/auth/types/RequestPasswordReset.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountErrorCode } from "./../../types/globalTypes";
+import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: RequestPasswordReset
@@ -13,6 +13,7 @@ export interface RequestPasswordReset_requestPasswordReset_errors {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface RequestPasswordReset_requestPasswordReset {

src/auth/types/SetPassword.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountErrorCode, PermissionEnum } from "./../../types/globalTypes";
+import { AccountErrorCode, AddressTypeEnum, PermissionEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: SetPassword
@@ -13,6 +13,7 @@ export interface SetPassword_setPassword_errors {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface SetPassword_setPassword_user_userPermissions {

src/components/AddressEdit/AddressEdit.tsx

@@ -74,6 +74,7 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
     "streetAddress1",
     "streetAddress2"
   ];
+
   const formErrors = getFormErrors<
     keyof AddressTypeInput,
     AccountErrorFragment | OrderErrorFragment

src/customers/components/CustomerAddressChoiceCard/CustomerAddressChoiceCard.tsx

@@ -0,0 +1,34 @@
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import AddressFormatter from "@saleor/components/AddressFormatter";
+import classNames from "classnames";
+import React from "react";
+
+import { CustomerAddresses_user_addresses } from "../../types/CustomerAddresses";
+import { useStyles } from "./styles";
+
+export interface CustomerAddressChoiceCardProps {
+  address: CustomerAddresses_user_addresses;
+  selected: boolean;
+  onSelect: () => void;
+}
+
+const CustomerAddressChoiceCard: React.FC<CustomerAddressChoiceCardProps> = props => {
+  const { address, selected, onSelect } = props;
+  const classes = useStyles(props);
+
+  return (
+    <Card
+      className={classNames(classes.card, {
+        [classes.cardSelected]: selected
+      })}
+      onClick={onSelect}
+    >
+      <CardContent>
+        <AddressFormatter address={address} />
+      </CardContent>
+    </Card>
+  );
+};
+CustomerAddressChoiceCard.displayName = "CustomerAddressChoiceCard";
+export default CustomerAddressChoiceCard;

src/customers/components/CustomerAddressChoiceCard/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./CustomerAddressChoiceCard";
+export * from "./CustomerAddressChoiceCard";

src/customers/components/CustomerAddressChoiceCard/styles.ts

@@ -0,0 +1,16 @@
+import { makeStyles } from "@saleor/theme";
+
+export const useStyles = makeStyles(
+  theme => ({
+    card: {
+      cursor: "pointer",
+      padding: "1px"
+    },
+    cardSelected: {
+      borderColor: theme.palette.primary.main,
+      borderWidth: "2px",
+      padding: "0"
+    }
+  }),
+  { name: "CustomerAddressChoiceCard" }
+);

src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx

@@ -8,6 +8,7 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
+import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
 import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment";
 import useAddressValidation from "@saleor/hooks/useAddressValidation";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
@@ -16,6 +17,7 @@ import { buttonMessages } from "@saleor/intl";
 import { createStyles, WithStyles, withStyles } from "@saleor/theme";
 import { AddressInput } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
+import { mapCountriesToChoices } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -25,10 +27,7 @@ import { CustomerAddresses_user_addresses } from "../../types/CustomerAddresses"
 export interface CustomerAddressDialogProps {
   address: CustomerAddresses_user_addresses;
   confirmButtonState: ConfirmButtonTransitionState;
-  countries: Array<{
+  countries: ShopInfo_shop_countries[];
-    code: string;
-    label: string;
-  }>;
   errors: AccountErrorFragment[];
   open: boolean;
   variant: "create" | "edit";
@@ -83,11 +82,7 @@ const CustomerAddressDialog = withStyles(
       streetAddress2: address?.streetAddress2 || ""
     };
 
-    const countryChoices =
+    const countryChoices = mapCountriesToChoices(countries || []);
-      countries?.map(country => ({
-        label: country.label,
-        value: country.code
-      })) || [];
 
     return (
       <Dialog

src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx

@@ -11,6 +11,7 @@ import useAddressValidation from "@saleor/hooks/useAddressValidation";
 import { sectionNames } from "@saleor/intl";
 import { AddressInput } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
+import { mapCountriesToChoices } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -69,10 +70,7 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
   const intl = useIntl();
 
   const [countryDisplayName, setCountryDisplayName] = React.useState("");
-  const countryChoices = countries.map(country => ({
+  const countryChoices = mapCountriesToChoices(countries);
-    label: country.country,
-    value: country.code
-  }));
   const {
     errors: validationErrors,
     submit: handleSubmitWithAddress

src/customers/queries.ts

@@ -107,6 +107,10 @@ export const TypedCustomerAddressesQuery = TypedQuery<
   CustomerAddresses,
   CustomerAddressesVariables
 >(customerAddresses);
+export const useCustomerAddressesQuery = makeQuery<
+  CustomerAddresses,
+  CustomerAddressesVariables
+>(customerAddresses);
 
 const customerCreateData = gql`
   query CustomerCreateData {

src/customers/types.ts

@@ -11,6 +11,7 @@ export interface AddressTypeInput {
   streetAddress1: string;
   streetAddress2?: string;
 }
+
 export interface AddressType {
   id: string;
   city: string;

src/customers/types/BulkRemoveCustomers.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountErrorCode } from "./../../types/globalTypes";
+import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: BulkRemoveCustomers
@@ -13,6 +13,7 @@ export interface BulkRemoveCustomers_customerBulkDelete_errors {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface BulkRemoveCustomers_customerBulkDelete {

src/customers/types/CreateCustomer.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { UserCreateInput, AccountErrorCode } from "./../../types/globalTypes";
+import { UserCreateInput, AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: CreateCustomer
@@ -13,6 +13,7 @@ export interface CreateCustomer_customerCreate_errors {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface CreateCustomer_customerCreate_user {

src/customers/types/CreateCustomerAddress.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AddressInput, AccountErrorCode } from "./../../types/globalTypes";
+import { AddressInput, AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: CreateCustomerAddress
@@ -13,6 +13,7 @@ export interface CreateCustomerAddress_addressCreate_errors {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface CreateCustomerAddress_addressCreate_address_country {

src/customers/types/RemoveCustomer.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountErrorCode } from "./../../types/globalTypes";
+import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: RemoveCustomer
@@ -13,6 +13,7 @@ export interface RemoveCustomer_customerDelete_errors {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface RemoveCustomer_customerDelete {

src/customers/types/RemoveCustomerAddress.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountErrorCode } from "./../../types/globalTypes";
+import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: RemoveCustomerAddress
@@ -13,6 +13,7 @@ export interface RemoveCustomerAddress_addressDelete_errors {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface RemoveCustomerAddress_addressDelete_user_addresses_country {

src/customers/types/SetCustomerDefaultAddress.ts

@@ -13,6 +13,7 @@ export interface SetCustomerDefaultAddress_addressSetDefault_errors {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface SetCustomerDefaultAddress_addressSetDefault_user_addresses_country {

src/customers/types/UpdateCustomer.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { CustomerInput, AccountErrorCode } from "./../../types/globalTypes";
+import { CustomerInput, AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: UpdateCustomer
@@ -13,6 +13,7 @@ export interface UpdateCustomer_customerUpdate_errors {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface UpdateCustomer_customerUpdate_user_metadata {

src/customers/types/UpdateCustomerAddress.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AddressInput, AccountErrorCode } from "./../../types/globalTypes";
+import { AddressInput, AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: UpdateCustomerAddress
@@ -13,6 +13,7 @@ export interface UpdateCustomerAddress_addressUpdate_errors {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface UpdateCustomerAddress_addressUpdate_address_country {

src/customers/views/CustomerAddresses.tsx

@@ -101,11 +101,7 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
                   {(removeCustomerAddress, removeCustomerAddressOpts) => (
                     <TypedCustomerAddressesQuery variables={{ id }}>
                       {customerData => {
-                        const countryChoices =
+                        const countryChoices = shop?.countries || [];
-                          shop?.countries?.map(country => ({
-                            code: country.code,
-                            label: country.country
-                          })) || [];
 
                         return (
                           <>

src/fragments/errors.ts

@@ -44,6 +44,7 @@ export const accountErrorFragment = gql`
   fragment AccountErrorFragment on AccountError {
     code
     field
+    addressType
   }
 `;
 
@@ -66,6 +67,7 @@ export const orderErrorFragment = gql`
   fragment OrderErrorFragment on OrderError {
     code
     field
+    addressType
   }
 `;
 

src/fragments/types/AccountErrorFragment.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountErrorCode } from "./../../types/globalTypes";
+import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL fragment: AccountErrorFragment
@@ -13,4 +13,5 @@ export interface AccountErrorFragment {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }

src/fragments/types/OrderErrorFragment.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderErrorCode } from "./../../types/globalTypes";
+import { OrderErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL fragment: OrderErrorFragment
@@ -13,4 +13,5 @@ export interface OrderErrorFragment {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }

src/hooks/useAddressValidation.ts

@@ -1,7 +1,11 @@
 import { AddressTypeInput } from "@saleor/customers/types";
 import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment";
-import { transformFormToAddress } from "@saleor/misc";
+import { transformFormToAddressInput } from "@saleor/misc";
-import { AccountErrorCode, AddressInput } from "@saleor/types/globalTypes";
+import {
+  AccountErrorCode,
+  AddressInput,
+  AddressTypeEnum
+} from "@saleor/types/globalTypes";
 import { add, remove } from "@saleor/utils/lists";
 import { useState } from "react";
 
@@ -11,7 +15,8 @@ interface UseAddressValidation<TInput, TOutput> {
 }
 
 function useAddressValidation<TInput, TOutput>(
-  onSubmit: (address: TInput & AddressInput) => TOutput
+  onSubmit: (address: TInput & AddressInput) => TOutput,
+  addressType?: AddressTypeEnum
 ): UseAddressValidation<TInput, TOutput> {
   const [validationErrors, setValidationErrors] = useState<
     AccountErrorFragment[]
@@ -20,7 +25,8 @@ function useAddressValidation<TInput, TOutput>(
   const countryRequiredError: AccountErrorFragment = {
     __typename: "AccountError",
     code: AccountErrorCode.REQUIRED,
-    field: "country"
+    field: "country",
+    addressType
   };
 
   return {
@@ -34,7 +40,7 @@ function useAddressValidation<TInput, TOutput>(
             (a, b) => a.field === b.field
           )
         );
-        return onSubmit(transformFormToAddress(data));
+        return onSubmit(transformFormToAddressInput(data));
       } catch {
         setValidationErrors(add(countryRequiredError, validationErrors));
       }

src/intl.ts

@@ -128,6 +128,10 @@ export const buttonMessages = defineMessages({
     defaultMessage: "Confirm",
     description: "button"
   },
+  continue: {
+    defaultMessage: "Continue",
+    description: "button"
+  },
   create: {
     defaultMessage: "Create",
     description: "button"
@@ -164,6 +168,10 @@ export const buttonMessages = defineMessages({
     defaultMessage: "Save",
     description: "button"
   },
+  select: {
+    defaultMessage: "Select",
+    description: "select option, button"
+  },
   selectAll: {
     defaultMessage: "Select All",
     description: "select all options, button"

src/misc.ts

@@ -215,7 +215,7 @@ export const transformOrderStatus = (
   };
 };
 
-export const transformAddressToForm = (data: AddressType) => ({
+export const transformAddressToForm = (data?: AddressType) => ({
   city: data?.city || "",
   cityArea: data?.cityArea || "",
   companyName: data?.companyName || "",
@@ -410,7 +410,7 @@ export function capitalize(s: string) {
   return s.charAt(0).toLocaleUpperCase() + s.slice(1);
 }
 
-export function transformFormToAddress<T>(
+export function transformFormToAddressInput<T>(
   address: T & AddressTypeInput
 ): T & AddressInput {
   return {
@@ -437,3 +437,17 @@ export const getDatePeriod = (days: number): DateRangeInput => {
     lte: end.format(format)
   };
 };
+
+export const transformAddressToAddressInput = (data?: AddressType) => ({
+  city: data?.city || "",
+  cityArea: data?.cityArea || "",
+  companyName: data?.companyName || "",
+  country: findInEnum(data?.country?.code || "", CountryCode),
+  countryArea: data?.countryArea || "",
+  firstName: data?.firstName || "",
+  lastName: data?.lastName || "",
+  phone: data?.phone || "",
+  postalCode: data?.postalCode || "",
+  streetAddress1: data?.streetAddress1 || "",
+  streetAddress2: data?.streetAddress2 || ""
+});

src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx

@@ -8,16 +8,17 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
+import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
 import { AddressTypeInput } from "@saleor/customers/types";
 import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
 import useAddressValidation from "@saleor/hooks/useAddressValidation";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { buttonMessages } from "@saleor/intl";
-import { maybe } from "@saleor/misc";
 import { makeStyles } from "@saleor/theme";
 import { AddressInput } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
+import { mapCountriesToChoices } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -36,10 +37,7 @@ interface OrderAddressEditDialogProps {
   open: boolean;
   errors: OrderErrorFragment[];
   variant: "billing" | "shipping" | string;
-  countries?: Array<{
+  countries?: ShopInfo_shop_countries[];
-    code: string;
-    label: string;
-  }>;
   onClose();
   onConfirm(data: AddressInput);
 }
@@ -59,9 +57,7 @@ const OrderAddressEditDialog: React.FC<OrderAddressEditDialogProps> = props => {
   const classes = useStyles(props);
   const intl = useIntl();
   const [countryDisplayName, setCountryDisplayName] = useStateFromProps(
-    maybe(
+    countries.find(country => address?.country === country.code)?.country
-      () => countries.find(country => address.country === country.code).label
-    )
   );
   const {
     errors: validationErrors,
@@ -72,10 +68,7 @@ const OrderAddressEditDialog: React.FC<OrderAddressEditDialogProps> = props => {
     open
   );
 
-  const countryChoices = countries.map(country => ({
+  const countryChoices = mapCountriesToChoices(countries);
-    label: country.label,
-    value: country.code
-  }));
 
   return (
     <Dialog onClose={onClose} open={open} classes={{ paper: classes.overflow }}>

src/orders/components/OrderCustomer/OrderCustomer.tsx

@@ -48,6 +48,13 @@ const useStyles = makeStyles(
   { name: "OrderCustomer" }
 );
 
+export interface CustomerEditData {
+  user?: string;
+  userEmail?: string;
+  prevUser?: string;
+  prevUserEmail?: string;
+}
+
 export interface OrderCustomerProps
   extends Partial<FetchMoreProps>,
     UserPermissionProps {
@@ -57,7 +64,7 @@ export interface OrderCustomerProps
   canEditAddresses: boolean;
   canEditCustomer: boolean;
   fetchUsers?: (query: string) => void;
-  onCustomerEdit?: (data: { user?: string; userEmail?: string }) => void;
+  onCustomerEdit?: (data: CustomerEditData) => void;
   onProfileView: () => void;
   onBillingAddressEdit?: () => void;
   onShippingAddressEdit?: () => void;
@@ -132,6 +139,8 @@ const OrderCustomer: React.FC<OrderCustomerProps> = props => {
                 const value = event.target.value;
 
                 onCustomerEdit({
+                  prevUser: user?.id,
+                  prevUserEmail: userEmail,
                   [value.includes("@") ? "userEmail" : "user"]: value
                 });
                 toggleEditMode();

src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressEdit.tsx

@@ -0,0 +1,141 @@
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import AddressEdit from "@saleor/components/AddressEdit";
+import CardSpacer from "@saleor/components/CardSpacer";
+import FormSpacer from "@saleor/components/FormSpacer";
+import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
+import Skeleton from "@saleor/components/Skeleton";
+import CustomerAddressChoiceCard from "@saleor/customers/components/CustomerAddressChoiceCard";
+import { AddressTypeInput } from "@saleor/customers/types";
+import { CustomerAddresses_user_addresses } from "@saleor/customers/types/CustomerAddresses";
+import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment";
+import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
+import { FormChange } from "@saleor/hooks/useForm";
+import React from "react";
+import { useIntl } from "react-intl";
+
+import { AddressInputOptionEnum } from "./form";
+import { addressEditMessages } from "./messages";
+import { useStyles } from "./styles";
+
+export interface OrderCustomerAddressEditProps {
+  loading: boolean;
+  customerAddresses: CustomerAddresses_user_addresses[];
+  countryChoices: SingleAutocompleteChoiceType[];
+  addressInputOption: AddressInputOptionEnum;
+  addressInputName: string;
+  onChangeAddressInputOption: FormChange;
+  customerAddressId: string;
+  formAddress: AddressTypeInput;
+  formAddressCountryDisplayName: string;
+  formErrors: Array<AccountErrorFragment | OrderErrorFragment>;
+  onChangeCustomerAddress: (
+    customerAddress: CustomerAddresses_user_addresses
+  ) => void;
+  onChangeFormAddress: (event: React.ChangeEvent<any>) => void;
+  onChangeFormAddressCountry: (event: React.ChangeEvent<any>) => void;
+}
+
+const OrderCustomerAddressEdit: React.FC<OrderCustomerAddressEditProps> = props => {
+  const {
+    loading,
+    customerAddresses,
+    countryChoices,
+    addressInputOption,
+    addressInputName,
+    onChangeAddressInputOption,
+    customerAddressId,
+    formAddress,
+    formAddressCountryDisplayName,
+    formErrors,
+    onChangeCustomerAddress,
+    onChangeFormAddress,
+    onChangeFormAddressCountry
+  } = props;
+
+  const classes = useStyles(props);
+  const intl = useIntl();
+
+  if (loading) {
+    return <Skeleton />;
+  }
+
+  if (!customerAddresses.length) {
+    return (
+      <AddressEdit
+        countries={countryChoices}
+        countryDisplayValue={formAddressCountryDisplayName}
+        data={formAddress}
+        errors={formErrors}
+        onChange={onChangeFormAddress}
+        onCountryChange={onChangeFormAddressCountry}
+      />
+    );
+  }
+
+  return (
+    <RadioGroup
+      className={classes.container}
+      value={addressInputOption}
+      name={addressInputName}
+      onChange={event => onChangeAddressInputOption(event)}
+    >
+      <FormControlLabel
+        value={AddressInputOptionEnum.CUSTOMER_ADDRESS}
+        control={
+          <Radio
+            color="primary"
+            data-test="addressInputOption"
+            data-test-id={AddressInputOptionEnum.CUSTOMER_ADDRESS}
+          />
+        }
+        label={intl.formatMessage(addressEditMessages.customerAddress)}
+        className={classes.optionLabel}
+      />
+      {addressInputOption === AddressInputOptionEnum.CUSTOMER_ADDRESS && (
+        <>
+          {customerAddresses.map(customerAddress => (
+            <React.Fragment key={customerAddress.id}>
+              <CardSpacer />
+              <CustomerAddressChoiceCard
+                address={customerAddress}
+                selected={customerAddress.id === customerAddressId}
+                onSelect={() => onChangeCustomerAddress(customerAddress)}
+              />
+            </React.Fragment>
+          ))}
+          <FormSpacer />
+        </>
+      )}
+      <FormControlLabel
+        value={AddressInputOptionEnum.NEW_ADDRESS}
+        control={
+          <Radio
+            color="primary"
+            data-test={addressInputOption}
+            data-test-id={AddressInputOptionEnum.NEW_ADDRESS}
+          />
+        }
+        label={intl.formatMessage(addressEditMessages.newAddress)}
+        className={classes.optionLabel}
+      />
+      {addressInputOption === AddressInputOptionEnum.NEW_ADDRESS && (
+        <>
+          <FormSpacer />
+          <AddressEdit
+            countries={countryChoices}
+            countryDisplayValue={formAddressCountryDisplayName}
+            data={formAddress}
+            errors={formErrors}
+            onChange={onChangeFormAddress}
+            onCountryChange={onChangeFormAddressCountry}
+          />
+        </>
+      )}
+    </RadioGroup>
+  );
+};
+
+OrderCustomerAddressEdit.displayName = "OrderCustomerAddressEdit";
+export default OrderCustomerAddressEdit;

src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.stories.tsx

@@ -0,0 +1,46 @@
+import Decorator from "@saleor/storybook/Decorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import { countries, order as orderFixture } from "../../fixtures";
+import OrderCustomerAddressesEditDialog, {
+  OrderCustomerAddressesEditDialogProps
+} from "./OrderCustomerAddressesEditDialog";
+
+const order = orderFixture("");
+
+const props: OrderCustomerAddressesEditDialogProps = {
+  confirmButtonState: "default",
+  loading: false,
+  onClose: () => undefined,
+  onConfirm: () => undefined,
+  open: true,
+  errors: undefined
+};
+
+storiesOf("Orders / OrderCustomerAddressesEditDialog", module)
+  .addDecorator(Decorator)
+  .add("default", () => (
+    <OrderCustomerAddressesEditDialog
+      {...props}
+      countries={countries}
+      customerAddresses={[
+        order.shippingAddress,
+        { ...order.billingAddress, id: "asdfghjfuunie" }
+      ]}
+    />
+  ))
+  .add("no customer addresses", () => (
+    <OrderCustomerAddressesEditDialog
+      {...props}
+      countries={countries}
+      customerAddresses={[]}
+    />
+  ))
+  .add("loading", () => (
+    <OrderCustomerAddressesEditDialog
+      {...props}
+      loading={true}
+      confirmButtonState="loading"
+    />
+  ));

src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx

@@ -0,0 +1,262 @@
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import Divider from "@material-ui/core/Divider";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Typography from "@material-ui/core/Typography";
+import Checkbox from "@saleor/components/Checkbox";
+import ConfirmButton, {
+  ConfirmButtonTransitionState
+} from "@saleor/components/ConfirmButton";
+import FormSpacer from "@saleor/components/FormSpacer";
+import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
+import {
+  CustomerAddresses_user_addresses,
+  CustomerAddresses_user_defaultBillingAddress,
+  CustomerAddresses_user_defaultShippingAddress
+} from "@saleor/customers/types/CustomerAddresses";
+import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
+import useAddressValidation from "@saleor/hooks/useAddressValidation";
+import { SubmitPromise } from "@saleor/hooks/useForm";
+import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
+import { buttonMessages } from "@saleor/intl";
+import { transformAddressToAddressInput } from "@saleor/misc";
+import { AddressInput, AddressTypeEnum } from "@saleor/types/globalTypes";
+import { mapCountriesToChoices } from "@saleor/utils/maps";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { getById } from "../OrderReturnPage/utils";
+import OrderCustomerAddressesEditForm, {
+  AddressInputOptionEnum,
+  OrderCustomerAddressesEditFormData
+} from "./form";
+import { dialogMessages } from "./messages";
+import OrderCustomerAddressEdit from "./OrderCustomerAddressEdit";
+import { useStyles } from "./styles";
+
+export interface OrderCustomerAddressesEditDialogOutput {
+  shippingAddress: AddressInput;
+  billingAddress: AddressInput;
+}
+
+export interface OrderCustomerAddressesEditDialogProps {
+  open: boolean;
+  loading: boolean;
+  confirmButtonState: ConfirmButtonTransitionState;
+  errors: OrderErrorFragment[];
+  countries?: ShopInfo_shop_countries[];
+  customerAddresses?: CustomerAddresses_user_addresses[];
+  defaultShippingAddress?: CustomerAddresses_user_defaultShippingAddress;
+  defaultBillingAddress?: CustomerAddresses_user_defaultBillingAddress;
+  onClose();
+  onConfirm(data: OrderCustomerAddressesEditDialogOutput): SubmitPromise;
+}
+
+const OrderCustomerAddressesEditDialog: React.FC<OrderCustomerAddressesEditDialogProps> = props => {
+  const {
+    open,
+    loading,
+    confirmButtonState,
+    errors = [],
+    countries = [],
+    customerAddresses = [],
+    defaultShippingAddress,
+    defaultBillingAddress,
+    onClose,
+    onConfirm
+  } = props;
+
+  const classes = useStyles(props);
+  const intl = useIntl();
+  const {
+    errors: shippingValidationErrors,
+    submit: handleShippingSubmit
+  } = useAddressValidation(address => address, AddressTypeEnum.SHIPPING);
+  const {
+    errors: billingValidationErrors,
+    submit: handleBillingSubmit
+  } = useAddressValidation(address => address, AddressTypeEnum.BILLING);
+  const dialogErrors = useModalDialogErrors(
+    [...errors, ...shippingValidationErrors, ...billingValidationErrors],
+    open
+  );
+
+  const getCustomerAddress = (customerAddressId: string): AddressInput =>
+    transformAddressToAddressInput(
+      customerAddresses.find(getById(customerAddressId))
+    );
+
+  const handleAddressesSubmit = (data: OrderCustomerAddressesEditFormData) => {
+    const shippingAddress =
+      customerAddresses.length > 0 &&
+      data.shippingAddressInputOption ===
+        AddressInputOptionEnum.CUSTOMER_ADDRESS
+        ? getCustomerAddress(data.customerShippingAddress.id)
+        : handleShippingSubmit(data.shippingAddress);
+
+    if (data.billingSameAsShipping) {
+      return {
+        shippingAddress,
+        billingAddress: shippingAddress
+      };
+    }
+
+    const billingAddress =
+      customerAddresses.length > 0 &&
+      data.billingAddressInputOption === AddressInputOptionEnum.CUSTOMER_ADDRESS
+        ? getCustomerAddress(data.customerBillingAddress.id)
+        : handleBillingSubmit(data.billingAddress);
+
+    return {
+      shippingAddress,
+      billingAddress
+    };
+  };
+
+  const handleSubmit = (data: OrderCustomerAddressesEditFormData) => {
+    const adressesInput = handleAddressesSubmit(data);
+
+    if (adressesInput.shippingAddress && adressesInput.billingAddress) {
+      onConfirm(adressesInput);
+    }
+  };
+
+  const countryChoices = mapCountriesToChoices(countries);
+
+  return (
+    <Dialog onClose={onClose} open={open}>
+      <OrderCustomerAddressesEditForm
+        countryChoices={countryChoices}
+        defaultShippingAddress={defaultShippingAddress}
+        defaultBillingAddress={defaultBillingAddress}
+        onSubmit={handleSubmit}
+      >
+        {({ change, data, handlers }) => (
+          <>
+            <DialogTitle>
+              <FormattedMessage {...dialogMessages.title} />
+            </DialogTitle>
+            <DialogContent className={classes.overflow}>
+              <Typography>
+                {customerAddresses.length > 0 ? (
+                  <FormattedMessage
+                    {...dialogMessages.customerShippingAddressDescription}
+                  />
+                ) : (
+                  <FormattedMessage
+                    {...dialogMessages.shippingAddressDescription}
+                  />
+                )}
+              </Typography>
+              <FormSpacer />
+              <OrderCustomerAddressEdit
+                loading={loading}
+                countryChoices={countryChoices}
+                addressInputOption={data.shippingAddressInputOption}
+                addressInputName="shippingAddressInputOption"
+                onChangeAddressInputOption={change}
+                customerAddresses={customerAddresses}
+                customerAddressId={data.customerShippingAddress?.id}
+                formAddress={data.shippingAddress}
+                formAddressCountryDisplayName={data.shippingCountryDisplayName}
+                formErrors={dialogErrors.filter(
+                  error => error.addressType === AddressTypeEnum.SHIPPING
+                )}
+                onChangeCustomerAddress={customerAddress =>
+                  handlers.changeCustomerAddress(
+                    customerAddress,
+                    "customerShippingAddress"
+                  )
+                }
+                onChangeFormAddress={event =>
+                  handlers.changeFormAddress(event, "shippingAddress")
+                }
+                onChangeFormAddressCountry={handlers.selectShippingCountry}
+              />
+              <FormSpacer />
+              <Divider />
+              <FormSpacer />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={data.billingSameAsShipping}
+                    name="billingSameAsShipping"
+                    onChange={() =>
+                      change({
+                        target: {
+                          name: "billingSameAsShipping",
+                          value: !data.billingSameAsShipping
+                        }
+                      })
+                    }
+                    data-test="billingSameAsShipping"
+                  />
+                }
+                label={intl.formatMessage(dialogMessages.billingSameAsShipping)}
+              />
+              {!data.billingSameAsShipping && (
+                <>
+                  <FormSpacer />
+                  <Typography>
+                    {customerAddresses.length > 0 ? (
+                      <FormattedMessage
+                        {...dialogMessages.customerBillingAddressDescription}
+                      />
+                    ) : (
+                      <FormattedMessage
+                        {...dialogMessages.billingAddressDescription}
+                      />
+                    )}
+                  </Typography>
+                  <FormSpacer />
+                  <OrderCustomerAddressEdit
+                    loading={loading}
+                    countryChoices={countryChoices}
+                    addressInputOption={data.billingAddressInputOption}
+                    addressInputName="billingAddressInputOption"
+                    onChangeAddressInputOption={change}
+                    customerAddresses={customerAddresses}
+                    customerAddressId={data.customerBillingAddress?.id}
+                    formAddress={data.billingAddress}
+                    formAddressCountryDisplayName={
+                      data.billingCountryDisplayName
+                    }
+                    formErrors={dialogErrors.filter(
+                      error => error.addressType === AddressTypeEnum.BILLING
+                    )}
+                    onChangeCustomerAddress={customerAddress =>
+                      handlers.changeCustomerAddress(
+                        customerAddress,
+                        "customerBillingAddress"
+                      )
+                    }
+                    onChangeFormAddress={event =>
+                      handlers.changeFormAddress(event, "billingAddress")
+                    }
+                    onChangeFormAddressCountry={handlers.selectBillingCountry}
+                  />
+                </>
+              )}
+            </DialogContent>
+            <DialogActions>
+              <ConfirmButton
+                transitionState={confirmButtonState}
+                color="primary"
+                variant="contained"
+                type="submit"
+              >
+                <FormattedMessage {...buttonMessages.select} />
+              </ConfirmButton>
+            </DialogActions>
+          </>
+        )}
+      </OrderCustomerAddressesEditForm>
+    </Dialog>
+  );
+};
+
+OrderCustomerAddressesEditDialog.displayName =
+  "OrderCustomerAddressesEditDialog";
+export default OrderCustomerAddressesEditDialog;

src/orders/components/OrderCustomerAddressesEditDialog/form.tsx

@@ -0,0 +1,202 @@
+import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
+import { AddressTypeInput } from "@saleor/customers/types";
+import {
+  CustomerAddresses_user_addresses,
+  CustomerAddresses_user_defaultBillingAddress,
+  CustomerAddresses_user_defaultShippingAddress
+} from "@saleor/customers/types/CustomerAddresses";
+import useForm, { FormChange } from "@saleor/hooks/useForm";
+import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
+import React, { useState } from "react";
+
+export enum AddressInputOptionEnum {
+  CUSTOMER_ADDRESS = "customerAddress",
+  NEW_ADDRESS = "newAddress"
+}
+
+export interface OrderCustomerAddressesEditFormData {
+  billingSameAsShipping: boolean;
+  shippingAddressInputOption: AddressInputOptionEnum;
+  billingAddressInputOption: AddressInputOptionEnum;
+  customerShippingAddress: CustomerAddresses_user_defaultShippingAddress;
+  customerBillingAddress: CustomerAddresses_user_defaultBillingAddress;
+  shippingAddress: AddressTypeInput;
+  billingAddress: AddressTypeInput;
+}
+
+export interface OrderCustomerAddressesEditData
+  extends OrderCustomerAddressesEditFormData {
+  shippingCountryDisplayName: string;
+  billingCountryDisplayName: string;
+}
+
+export interface OrderCustomerAddressesEditHandlers {
+  changeFormAddress: (
+    event: React.ChangeEvent<any>,
+    addressType: "shippingAddress" | "billingAddress"
+  ) => void;
+  changeCustomerAddress: (
+    customerAddress: CustomerAddresses_user_addresses,
+    addressType: "customerShippingAddress" | "customerBillingAddress"
+  ) => void;
+  selectShippingCountry: FormChange;
+  selectBillingCountry: FormChange;
+}
+
+interface UseOrderCustomerAddressesEditFormResult {
+  submit: (event: React.FormEvent<any>) => void;
+  change: FormChange;
+  hasChanged: boolean;
+  data: OrderCustomerAddressesEditData;
+  handlers: OrderCustomerAddressesEditHandlers;
+}
+
+interface UseOrderCustomerAddressesEditFormOpts {
+  countryChoices: SingleAutocompleteChoiceType[];
+  defaultShippingAddress: CustomerAddresses_user_defaultShippingAddress;
+  defaultBillingAddress: CustomerAddresses_user_defaultBillingAddress;
+}
+
+export interface OrderCustomerAddressesEditFormProps
+  extends UseOrderCustomerAddressesEditFormOpts {
+  children: (props: UseOrderCustomerAddressesEditFormResult) => React.ReactNode;
+  initial?: Partial<OrderCustomerAddressesEditFormData>;
+  onSubmit: (data: OrderCustomerAddressesEditData) => void;
+}
+
+function useOrderCustomerAddressesEditForm(
+  initial: Partial<OrderCustomerAddressesEditFormData>,
+  onSubmit: (data: OrderCustomerAddressesEditData) => void,
+  opts: UseOrderCustomerAddressesEditFormOpts
+): UseOrderCustomerAddressesEditFormResult {
+  const initialAddress: AddressTypeInput = {
+    city: "",
+    country: "",
+    phone: "",
+    postalCode: "",
+    streetAddress1: ""
+  };
+  const defaultInitialFormData: OrderCustomerAddressesEditFormData = {
+    billingSameAsShipping: true,
+    shippingAddressInputOption: AddressInputOptionEnum.CUSTOMER_ADDRESS,
+    billingAddressInputOption: AddressInputOptionEnum.CUSTOMER_ADDRESS,
+    customerShippingAddress: opts.defaultShippingAddress,
+    customerBillingAddress: opts.defaultBillingAddress,
+    shippingAddress: initialAddress,
+    billingAddress: initialAddress
+  };
+
+  const form = useForm({
+    ...initial,
+    ...defaultInitialFormData
+  });
+
+  const [changed, setChanged] = useState(false);
+  const triggerChange = () => setChanged(true);
+
+  const [shippingCountryDisplayName, setShippingCountryDisplayName] = useState(
+    ""
+  );
+  const [billingCountryDisplayName, setBillingCountryDisplayName] = useState(
+    ""
+  );
+
+  const handleChange: FormChange = (event, cb) => {
+    form.change(event, cb);
+    triggerChange();
+  };
+  const handleFormAddressChange = (
+    event: React.ChangeEvent<any>,
+    addressType: "shippingAddress" | "billingAddress"
+  ) =>
+    form.change({
+      target: {
+        name: addressType,
+        value: {
+          ...form.data[addressType],
+          [event.target.name]: event.target.value
+        }
+      }
+    });
+  const handleCustomerAddressChange = (
+    customerAddress: CustomerAddresses_user_addresses,
+    addressType: "customerShippingAddress" | "customerBillingAddress"
+  ) =>
+    form.change({
+      target: {
+        name: addressType,
+        value: customerAddress
+      }
+    });
+  const handleShippingCountrySelect = createSingleAutocompleteSelectHandler(
+    event =>
+      form.change({
+        target: {
+          name: "shippingAddress",
+          value: {
+            ...form.data.shippingAddress,
+            [event.target.name]: event.target.value
+          }
+        }
+      }),
+    setShippingCountryDisplayName,
+    opts.countryChoices
+  );
+  const handleBillingCountrySelect = createSingleAutocompleteSelectHandler(
+    event =>
+      form.change({
+        target: {
+          name: "billingAddress",
+          value: {
+            ...form.data.billingAddress,
+            [event.target.name]: event.target.value
+          }
+        }
+      }),
+    setBillingCountryDisplayName,
+    opts.countryChoices
+  );
+
+  const data = {
+    ...form.data,
+    shippingCountryDisplayName,
+    billingCountryDisplayName
+  };
+
+  const submit = (event: React.FormEvent<any>) => {
+    event.stopPropagation();
+    event.preventDefault();
+    return onSubmit(data);
+  };
+
+  return {
+    change: handleChange,
+    submit,
+    hasChanged: changed,
+    data,
+    handlers: {
+      changeCustomerAddress: handleCustomerAddressChange,
+      changeFormAddress: handleFormAddressChange,
+      selectShippingCountry: handleShippingCountrySelect,
+      selectBillingCountry: handleBillingCountrySelect
+    }
+  };
+}
+
+const OrderCustomerAddressesEditForm: React.FC<OrderCustomerAddressesEditFormProps> = ({
+  children,
+  initial,
+  onSubmit,
+  ...rest
+}) => {
+  const props = useOrderCustomerAddressesEditForm(
+    initial || {},
+    onSubmit,
+    rest
+  );
+
+  return <form onSubmit={props.submit}>{children(props)}</form>;
+};
+
+OrderCustomerAddressesEditForm.displayName = "OrderCustomerAddressesEditForm";
+export default OrderCustomerAddressesEditForm;

src/orders/components/OrderCustomerAddressesEditDialog/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./OrderCustomerAddressesEditDialog";
+export * from "./OrderCustomerAddressesEditDialog";

src/orders/components/OrderCustomerAddressesEditDialog/messages.ts

@@ -0,0 +1,41 @@
+import { defineMessages } from "react-intl";
+
+export const dialogMessages = defineMessages({
+  title: {
+    defaultMessage: "Shipping address for order",
+    description: "dialog header"
+  },
+  billingSameAsShipping: {
+    defaultMessage: "Billing address same as shipping address",
+    description: "checkbox label"
+  },
+  shippingAddressDescription: {
+    defaultMessage:
+      "This customer doesn’t have any shipping addresses. Provide address for order:",
+    description: "dialog content"
+  },
+  billingAddressDescription: {
+    defaultMessage: "Add a new address:",
+    description: "dialog content"
+  },
+  customerShippingAddressDescription: {
+    defaultMessage:
+      "Which address would you like to use as shipping address for selected customer:",
+    description: "dialog content"
+  },
+  customerBillingAddressDescription: {
+    defaultMessage: "Select one of customer addresses or add a new address:",
+    description: "dialog content"
+  }
+});
+
+export const addressEditMessages = defineMessages({
+  customerAddress: {
+    defaultMessage: "Use one of customer addresses",
+    description: "address type"
+  },
+  newAddress: {
+    defaultMessage: "Add new address",
+    description: "address type"
+  }
+});

src/orders/components/OrderCustomerAddressesEditDialog/styles.ts

@@ -0,0 +1,16 @@
+import { makeStyles } from "@saleor/theme";
+
+export const useStyles = makeStyles(
+  {
+    container: {
+      display: "block"
+    },
+    optionLabel: {
+      display: "block"
+    },
+    overflow: {
+      overflowY: "visible"
+    }
+  },
+  { name: "OrderCustomerAddressesEditDialog" }
+);

src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.stories.tsx

@@ -0,0 +1,24 @@
+import Decorator from "@saleor/storybook/Decorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import OrderCustomerChangeDialog, {
+  OrderCustomerChangeDialogProps
+} from "./OrderCustomerChangeDialog";
+
+const props: OrderCustomerChangeDialogProps = {
+  onClose: () => undefined,
+  onConfirm: () => undefined,
+  open: true
+};
+
+storiesOf("Orders / OrderCustomerChangeDialog", module)
+  .addDecorator(Decorator)
+  .add("default", () => (
+    <OrderCustomerChangeDialog
+      {...props}
+      onClose={() => undefined}
+      onConfirm={() => undefined}
+      open={true}
+    />
+  ));

src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx

@@ -0,0 +1,85 @@
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import Typography from "@material-ui/core/Typography";
+import ConfirmButton from "@saleor/components/ConfirmButton";
+import FormSpacer from "@saleor/components/FormSpacer";
+import { buttonMessages } from "@saleor/intl";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import OrderCustomerChangeForm, {
+  CustomerChangeActionEnum,
+  OrderCustomerChangeData
+} from "./form";
+import messages from "./messages";
+import { useStyles } from "./styles";
+
+export interface OrderCustomerChangeDialogProps {
+  open: boolean;
+  onClose();
+  onConfirm(data: OrderCustomerChangeData): void;
+}
+
+const OrderCustomerChangeDialog: React.FC<OrderCustomerChangeDialogProps> = props => {
+  const { open, onClose, onConfirm } = props;
+
+  const classes = useStyles(props);
+  const intl = useIntl();
+
+  return (
+    <Dialog onClose={onClose} open={open}>
+      <OrderCustomerChangeForm onSubmit={onConfirm}>
+        {({ change, data }) => (
+          <>
+            <DialogTitle>
+              <FormattedMessage {...messages.title} />
+            </DialogTitle>
+            <DialogContent className={classes.overflow}>
+              <Typography>
+                <FormattedMessage {...messages.description} />
+              </Typography>
+              <FormSpacer />
+              <RadioGroup
+                className={classes.container}
+                value={data.changeActionOption}
+                name="changeActionOption"
+                onChange={event => change(event)}
+              >
+                <FormControlLabel
+                  value={CustomerChangeActionEnum.KEEP_ADDRESS}
+                  control={<Radio color="primary" />}
+                  label={intl.formatMessage(messages.keepAddress)}
+                  className={classes.optionLabel}
+                />
+                <FormControlLabel
+                  value={CustomerChangeActionEnum.CHANGE_ADDRESS}
+                  control={<Radio color="primary" />}
+                  label={intl.formatMessage(messages.changeAddress)}
+                  className={classes.optionLabel}
+                />
+              </RadioGroup>
+            </DialogContent>
+            <DialogActions>
+              <ConfirmButton
+                transitionState="default"
+                color="primary"
+                variant="contained"
+                type="submit"
+              >
+                <FormattedMessage {...buttonMessages.continue} />
+              </ConfirmButton>
+            </DialogActions>
+          </>
+        )}
+      </OrderCustomerChangeForm>
+    </Dialog>
+  );
+};
+
+OrderCustomerChangeDialog.displayName = "OrderCustomerChangeDialog";
+export default OrderCustomerChangeDialog;

src/orders/components/OrderCustomerChangeDialog/form.tsx

@@ -0,0 +1,72 @@
+import useForm, { FormChange } from "@saleor/hooks/useForm";
+import React, { useState } from "react";
+
+export enum CustomerChangeActionEnum {
+  KEEP_ADDRESS = "keepAddress",
+  CHANGE_ADDRESS = "changeAddress"
+}
+
+export interface OrderCustomerChangeData {
+  changeActionOption: CustomerChangeActionEnum;
+}
+
+interface UseOrderCustomerChangeFormResult {
+  submit: (event: React.FormEvent<any>) => void;
+  change: FormChange;
+  hasChanged: boolean;
+  data: OrderCustomerChangeData;
+}
+
+export interface OrderCustomerChangeFormProps {
+  children: (props: UseOrderCustomerChangeFormResult) => React.ReactNode;
+  initial?: Partial<OrderCustomerChangeData>;
+  onSubmit: (data: OrderCustomerChangeData) => void;
+}
+
+function useOrderCustomerChangeForm(
+  initial: Partial<OrderCustomerChangeData>,
+  onSubmit: (data: OrderCustomerChangeData) => void
+): UseOrderCustomerChangeFormResult {
+  const defaultInitialFormData: OrderCustomerChangeData = {
+    changeActionOption: CustomerChangeActionEnum.KEEP_ADDRESS
+  };
+
+  const form = useForm({
+    ...initial,
+    ...defaultInitialFormData
+  });
+
+  const [changed, setChanged] = useState(false);
+  const triggerChange = () => setChanged(true);
+
+  const handleChange: FormChange = (event, cb) => {
+    form.change(event, cb);
+    triggerChange();
+  };
+
+  const submit = (event: React.FormEvent<any>) => {
+    event.stopPropagation();
+    event.preventDefault();
+    return onSubmit(form.data);
+  };
+
+  return {
+    change: handleChange,
+    submit,
+    hasChanged: changed,
+    data: form.data
+  };
+}
+
+const OrderCustomerChangeForm: React.FC<OrderCustomerChangeFormProps> = ({
+  children,
+  initial,
+  onSubmit
+}) => {
+  const props = useOrderCustomerChangeForm(initial || {}, onSubmit);
+
+  return <form onSubmit={props.submit}>{children(props)}</form>;
+};
+
+OrderCustomerChangeForm.displayName = "OrderCustomerChangeForm";
+export default OrderCustomerChangeForm;

src/orders/components/OrderCustomerChangeDialog/messages.ts

@@ -0,0 +1,23 @@
+import { defineMessages } from "react-intl";
+
+const messages = defineMessages({
+  title: {
+    defaultMessage: "Changed Customer",
+    description: "dialog header"
+  },
+  description: {
+    defaultMessage:
+      "You have changed customer assigned to this order. What would you like to do with the shipping address?",
+    description: "dialog description"
+  },
+  keepAddress: {
+    defaultMessage: "Keep address",
+    description: "option label"
+  },
+  changeAddress: {
+    defaultMessage: "Change address",
+    description: "option label"
+  }
+});
+
+export default messages;

src/orders/components/OrderCustomerChangeDialog/styles.ts

@@ -0,0 +1,16 @@
+import { makeStyles } from "@saleor/theme";
+
+export const useStyles = makeStyles(
+  {
+    container: {
+      display: "block"
+    },
+    optionLabel: {
+      display: "block"
+    },
+    overflow: {
+      overflowY: "visible"
+    }
+  },
+  { name: "OrderCustomerChangeDialog" }
+);

src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx

@@ -58,10 +58,6 @@ export interface OrderDetailsPageProps extends UserPermissionProps {
     id: string;
     name: string;
   }>;
-  countries?: Array<{
-    code: string;
-    label: string;
-  }>;
   disabled: boolean;
   saveButtonBarState: ConfirmButtonTransitionState;
   onOrderLineAdd?: () => void;

src/orders/components/OrderDraftPage/OrderDraftPage.tsx

@@ -17,9 +17,8 @@ import { FetchMoreProps, UserPermissionProps } from "@saleor/types";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { DraftOrderInput } from "../../../types/globalTypes";
 import { OrderDetails_order } from "../../types/OrderDetails";
-import OrderCustomer from "../OrderCustomer";
+import OrderCustomer, { CustomerEditData } from "../OrderCustomer";
 import OrderDraftDetails from "../OrderDraftDetails/OrderDraftDetails";
 import { FormData as OrderDraftDetailsProductsFormData } from "../OrderDraftDetailsProducts";
 import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
@@ -44,15 +43,11 @@ export interface OrderDraftPageProps
   order: OrderDetails_order;
   users: SearchCustomers_search_edges_node[];
   usersLoading: boolean;
-  countries: Array<{
-    code: string;
-    label: string;
-  }>;
   saveButtonBarState: ConfirmButtonTransitionState;
   fetchUsers: (query: string) => void;
   onBack: () => void;
   onBillingAddressEdit: () => void;
-  onCustomerEdit: (data: DraftOrderInput) => void;
+  onCustomerEdit: (data: CustomerEditData) => void;
   onDraftFinalize: () => void;
   onDraftRemove: () => void;
   onNoteAdd: (data: HistoryFormData) => void;

src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx

@@ -37,7 +37,8 @@ storiesOf("Views / Orders / Fulfill order", module)
           code: OrderErrorCode.INSUFFICIENT_STOCK,
           field: null,
           orderLine: orderToFulfill.lines[0].id,
-          warehouse: warehouseList[0].id
+          warehouse: warehouseList[0].id,
+          addressType: null
         }
       ]}
     />

src/orders/fixtures.ts

@@ -1,3 +1,4 @@
+import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
 import { InvoiceFragment } from "@saleor/fragments/types/InvoiceFragment";
 import { OrderSettingsFragment } from "@saleor/fragments/types/OrderSettingsFragment";
 import { SearchCustomers_search_edges_node } from "@saleor/searches/types/SearchCustomers";
@@ -1587,12 +1588,12 @@ export const variants = [
   { id: "p7", name: "Product 5: variant 2", sku: "14345", stockQuantity: 11 }
 ];
 export const prefixes = ["01", "02", "41", "49"];
-export const countries = [
+export const countries: ShopInfo_shop_countries[] = [
-  { code: "AF", label: "Afghanistan" },
+  { __typename: "CountryDisplay", code: "AF", country: "Afghanistan" },
-  { code: "AX", label: "Åland Islands" },
+  { __typename: "CountryDisplay", code: "AX", country: "Åland Islands" },
-  { code: "AL", label: "Albania" },
+  { __typename: "CountryDisplay", code: "AL", country: "Albania" },
-  { code: "DZ", label: "Algeria" },
+  { __typename: "CountryDisplay", code: "DZ", country: "Algeria" },
-  { code: "AS", label: "American Samoa" }
+  { __typename: "CountryDisplay", code: "AS", country: "American Samoa" }
 ];
 export const shippingMethods = [
   { country: "whole world", id: "s1", name: "DHL", price: {} },

src/orders/types/FulfillOrder.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderFulfillInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderFulfillInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: FulfillOrder
@@ -13,6 +13,7 @@ export interface FulfillOrder_orderFulfill_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
   warehouse: string | null;
   orderLine: string | null;
 }

src/orders/types/FulfillmentReturnProducts.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderReturnProductsInput, OrderErrorCode } from "./../../types/globalTypes";
+import { OrderReturnProductsInput, OrderErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: FulfillmentReturnProducts
@@ -13,6 +13,7 @@ export interface FulfillmentReturnProducts_orderFulfillmentReturnProducts_errors
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface FulfillmentReturnProducts_orderFulfillmentReturnProducts_order {

src/orders/types/OrderAddNote.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderAddNoteInput, OrderErrorCode, OrderEventsEmailsEnum, DiscountValueTypeEnum, OrderEventsEnum } from "./../../types/globalTypes";
+import { OrderAddNoteInput, OrderErrorCode, AddressTypeEnum, OrderEventsEmailsEnum, DiscountValueTypeEnum, OrderEventsEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderAddNote
@@ -13,6 +13,7 @@ export interface OrderAddNote_orderAddNote_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderAddNote_orderAddNote_order_events_discount_amount {

src/orders/types/OrderCancel.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderCancel
@@ -13,6 +13,7 @@ export interface OrderCancel_orderCancel_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderCancel_orderCancel_order_metadata {

src/orders/types/OrderCapture.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderCapture
@@ -13,6 +13,7 @@ export interface OrderCapture_orderCapture_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderCapture_orderCapture_order_metadata {

src/orders/types/OrderConfirm.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderConfirm
@@ -13,6 +13,7 @@ export interface OrderConfirm_orderConfirm_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderConfirm_orderConfirm_order_metadata {

src/orders/types/OrderDiscountAdd.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderDiscountCommonInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderDiscountCommonInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderDiscountAdd
@@ -13,6 +13,7 @@ export interface OrderDiscountAdd_orderDiscountAdd_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderDiscountAdd_orderDiscountAdd_order_metadata {

src/orders/types/OrderDiscountDelete.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderDiscountDelete
@@ -13,6 +13,7 @@ export interface OrderDiscountDelete_orderDiscountDelete_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderDiscountDelete_orderDiscountDelete_order_metadata {

src/orders/types/OrderDiscountUpdate.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderDiscountCommonInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderDiscountCommonInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderDiscountUpdate
@@ -13,6 +13,7 @@ export interface OrderDiscountUpdate_orderDiscountUpdate_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderDiscountUpdate_orderDiscountUpdate_order_metadata {

src/orders/types/OrderDraftBulkCancel.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderErrorCode } from "./../../types/globalTypes";
+import { OrderErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderDraftBulkCancel
@@ -13,6 +13,7 @@ export interface OrderDraftBulkCancel_draftOrderBulkDelete_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderDraftBulkCancel_draftOrderBulkDelete {

src/orders/types/OrderDraftCancel.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderDraftCancel
@@ -13,6 +13,7 @@ export interface OrderDraftCancel_draftOrderDelete_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderDraftCancel_draftOrderDelete_order_metadata {

src/orders/types/OrderDraftCreate.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { DraftOrderCreateInput, OrderErrorCode } from "./../../types/globalTypes";
+import { DraftOrderCreateInput, OrderErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderDraftCreate
@@ -13,6 +13,7 @@ export interface OrderDraftCreate_draftOrderCreate_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderDraftCreate_draftOrderCreate_order {

src/orders/types/OrderDraftFinalize.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderDraftFinalize
@@ -13,6 +13,7 @@ export interface OrderDraftFinalize_draftOrderComplete_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderDraftFinalize_draftOrderComplete_order_metadata {

src/orders/types/OrderDraftUpdate.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { DraftOrderInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { DraftOrderInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderDraftUpdate
@@ -13,6 +13,7 @@ export interface OrderDraftUpdate_draftOrderUpdate_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderDraftUpdate_draftOrderUpdate_order_metadata {

src/orders/types/OrderFulfillmentCancel.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { FulfillmentCancelInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { FulfillmentCancelInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderFulfillmentCancel
@@ -13,6 +13,7 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_metadata {

src/orders/types/OrderFulfillmentRefundProducts.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderRefundProductsInput, OrderErrorCode, DiscountValueTypeEnum, FulfillmentStatus, OrderDiscountType, OrderEventsEmailsEnum, OrderEventsEnum, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderRefundProductsInput, OrderErrorCode, AddressTypeEnum, DiscountValueTypeEnum, FulfillmentStatus, OrderDiscountType, OrderEventsEmailsEnum, OrderEventsEnum, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderFulfillmentRefundProducts
@@ -13,6 +13,7 @@ export interface OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_e
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_fulfillment_lines_orderLine_variant {

src/orders/types/OrderFulfillmentUpdateTracking.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { FulfillmentUpdateTrackingInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { FulfillmentUpdateTrackingInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderFulfillmentUpdateTracking
@@ -13,6 +13,7 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_e
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_metadata {

src/orders/types/OrderLineDelete.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderLineDelete
@@ -13,6 +13,7 @@ export interface OrderLineDelete_orderLineDelete_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderLineDelete_orderLineDelete_order_metadata {

src/orders/types/OrderLineDiscountRemove.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderLineDiscountRemove
@@ -13,6 +13,7 @@ export interface OrderLineDiscountRemove_orderLineDiscountRemove_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderLineDiscountRemove_orderLineDiscountRemove_order_metadata {

src/orders/types/OrderLineDiscountUpdate.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderDiscountCommonInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderDiscountCommonInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderLineDiscountUpdate
@@ -13,6 +13,7 @@ export interface OrderLineDiscountUpdate_orderLineDiscountUpdate_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderLineDiscountUpdate_orderLineDiscountUpdate_order_metadata {

src/orders/types/OrderLineUpdate.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderLineInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderLineInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderLineUpdate
@@ -13,6 +13,7 @@ export interface OrderLineUpdate_orderLineUpdate_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderLineUpdate_orderLineUpdate_order_metadata {

src/orders/types/OrderLinesAdd.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderLineCreateInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderLineCreateInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderLinesAdd
@@ -13,6 +13,7 @@ export interface OrderLinesAdd_orderLinesCreate_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderLinesAdd_orderLinesCreate_order_metadata {

src/orders/types/OrderMarkAsPaid.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderMarkAsPaid
@@ -13,6 +13,7 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderMarkAsPaid_orderMarkAsPaid_order_metadata {

src/orders/types/OrderRefund.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderRefund
@@ -13,6 +13,7 @@ export interface OrderRefund_orderRefund_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderRefund_orderRefund_order_metadata {

src/orders/types/OrderShippingMethodUpdate.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderUpdateShippingInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderUpdateShippingInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderShippingMethodUpdate
@@ -13,6 +13,7 @@ export interface OrderShippingMethodUpdate_orderUpdateShipping_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderShippingMethodUpdate_orderUpdateShipping_order_availableShippingMethods_price {

src/orders/types/OrderUpdate.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderUpdateInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderUpdateInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderUpdate
@@ -13,6 +13,7 @@ export interface OrderUpdate_orderUpdate_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderUpdate_orderUpdate_order_metadata {

src/orders/types/OrderVoid.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
+import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: OrderVoid
@@ -13,6 +13,7 @@ export interface OrderVoid_orderVoid_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface OrderVoid_orderVoid_order_metadata {

src/orders/urls.ts

@@ -105,6 +105,8 @@ export type OrderUrlDialog =
   | "cancel"
   | "cancel-fulfillment"
   | "capture"
+  | "customer-change"
+  | "edit-customer-addresses"
   | "edit-billing-address"
   | "edit-fulfillment"
   | "edit-shipping"

src/orders/views/OrderDetails/OrderAddressFields.tsx

@@ -57,10 +57,7 @@ const OrderAddressFields = ({
     confirmButtonState: isDraft
       ? orderDraftUpdate.opts.status
       : orderUpdate.opts.status,
-    countries: data?.shop?.countries.map(country => ({
+    countries: data?.shop?.countries,
-      code: country.code,
-      label: country.country
-    })),
     errors: isDraft
       ? orderDraftUpdate.opts.data?.draftOrderUpdate.errors
       : orderUpdate.opts.data?.orderUpdate.errors,

src/orders/views/OrderDetails/OrderDetailsMessages.tsx

@@ -159,8 +159,8 @@ export const OrderDetailsMessages: React.FC<OrderDetailsMessages> = ({
           defaultMessage: "Order successfully updated"
         })
       });
-    }
       closeModal();
+    }
   };
   const handleShippingMethodUpdate = (data: OrderShippingMethodUpdate) => {
     const errs = data.orderUpdateShipping?.errors;

src/orders/views/OrderDetails/OrderDraftDetails/index.tsx

@@ -1,7 +1,18 @@
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
+import { useCustomerAddressesQuery } from "@saleor/customers/queries";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useUser from "@saleor/hooks/useUser";
+import { CustomerEditData } from "@saleor/orders/components/OrderCustomer";
+import OrderCustomerAddressesEditDialog, {
+  OrderCustomerAddressesEditDialogOutput
+} from "@saleor/orders/components/OrderCustomerAddressesEditDialog";
+import {
+  CustomerChangeActionEnum,
+  OrderCustomerChangeData
+} from "@saleor/orders/components/OrderCustomerChangeDialog/form";
+import OrderCustomerChangeDialog from "@saleor/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog";
+import { OrderDetails } from "@saleor/orders/types/OrderDetails";
 import { OrderDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderDiscountProvider";
 import { OrderLineDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderLineDiscountProvider";
 import useCustomerSearch from "@saleor/searches/useCustomerSearch";
@@ -16,14 +27,14 @@ import OrderDraftPage from "../../../components/OrderDraftPage";
 import OrderProductAddDialog from "../../../components/OrderProductAddDialog";
 import OrderShippingMethodEditDialog from "../../../components/OrderShippingMethodEditDialog";
 import { useOrderVariantSearch } from "../../../queries";
-import { OrderUrlQueryParams } from "../../../urls";
+import { OrderUrlDialog, OrderUrlQueryParams } from "../../../urls";
 import { orderDraftListUrl } from "../../../urls";
 
 interface OrderDraftDetailsProps {
   id: string;
   params: OrderUrlQueryParams;
   loading: any;
-  data: any;
+  data: OrderDetails;
   orderAddNote: any;
   orderLineUpdate: any;
   orderLineDelete: any;
@@ -32,7 +43,7 @@ interface OrderDraftDetailsProps {
   orderDraftUpdate: any;
   orderDraftCancel: any;
   orderDraftFinalize: any;
-  openModal: any;
+  openModal: (action: OrderUrlDialog, newParams?: OrderUrlQueryParams) => void;
   closeModal: any;
 }
 
@@ -72,8 +83,70 @@ export const OrderDraftDetails: React.FC<OrderDraftDetailsProps> = ({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
 
+  const {
+    data: customerAddresses,
+    loading: customerAddressesLoading
+  } = useCustomerAddressesQuery({
+    variables: {
+      id: order?.user?.id
+    },
+    skip: params.action !== "edit-customer-addresses"
+  });
+
   const intl = useIntl();
 
+  const handleCustomerChange = async ({
+    user,
+    userEmail,
+    prevUser,
+    prevUserEmail
+  }: CustomerEditData) => {
+    const sameUser = user && user === prevUser;
+    const sameUserEmail = userEmail && userEmail === prevUserEmail;
+    if (sameUser || sameUserEmail) {
+      return;
+    }
+
+    const result = await orderDraftUpdate.mutate({
+      id,
+      input: {
+        user,
+        userEmail
+      }
+    });
+
+    if (result?.data?.draftOrderUpdate?.errors?.length) {
+      return;
+    }
+
+    const modalUri = prevUser ? "customer-change" : "edit-customer-addresses";
+    openModal(modalUri);
+  };
+
+  const handleCustomerChangeAction = (data: OrderCustomerChangeData) => {
+    if (data.changeActionOption === CustomerChangeActionEnum.CHANGE_ADDRESS) {
+      openModal("edit-customer-addresses");
+    } else {
+      closeModal();
+    }
+  };
+
+  const handleCustomerChangeAdresses = async (
+    data: OrderCustomerAddressesEditDialogOutput
+  ) => {
+    const result = await orderDraftUpdate.mutate({
+      id,
+      input: {
+        shippingAddress: data.shippingAddress,
+        billingAddress: data.billingAddress
+      }
+    });
+    if (!result?.data?.draftOrderUpdate?.errors?.length) {
+      closeModal();
+    }
+    return result;
+  };
+
   return (
     <>
       <WindowTitle
@@ -104,21 +177,12 @@ export const OrderDraftDetails: React.FC<OrderDraftDetailsProps> = ({
             fetchUsers={searchUsers}
             loading={users.loading}
             usersLoading={users.loading}
-            onCustomerEdit={data =>
+            onCustomerEdit={handleCustomerChange}
-              orderDraftUpdate.mutate({
-                id,
-                input: data
-              })
-            }
             onDraftFinalize={() => orderDraftFinalize.mutate({ id })}
             onDraftRemove={() => openModal("cancel")}
             onOrderLineAdd={() => openModal("add-order-line")}
             onBack={() => navigate(orderDraftListUrl())}
             order={order}
-            countries={(data?.shop?.countries || []).map(country => ({
-              code: country.code,
-              label: country.country
-            }))}
             onProductClick={id => () =>
               navigate(productUrl(encodeURIComponent(id)))}
             onBillingAddressEdit={() => openModal("edit-billing-address")}
@@ -184,6 +248,23 @@ export const OrderDraftDetails: React.FC<OrderDraftDetailsProps> = ({
           })
         }
       />
+      <OrderCustomerChangeDialog
+        open={params.action === "customer-change"}
+        onClose={closeModal}
+        onConfirm={handleCustomerChangeAction}
+      />
+      <OrderCustomerAddressesEditDialog
+        open={params.action === "edit-customer-addresses"}
+        loading={customerAddressesLoading}
+        confirmButtonState={orderDraftUpdate.opts.status}
+        errors={orderDraftUpdate.opts.data?.draftOrderUpdate?.errors || []}
+        countries={data?.shop?.countries}
+        customerAddresses={customerAddresses?.user?.addresses}
+        defaultShippingAddress={customerAddresses?.user?.defaultShippingAddress}
+        defaultBillingAddress={customerAddresses?.user?.defaultBillingAddress}
+        onClose={closeModal}
+        onConfirm={handleCustomerChangeAdresses}
+      />
     </>
   );
 };

src/products/components/ProductExportDialog/messages.ts

@@ -59,11 +59,6 @@ function useProductExportFieldMessages() {
       defaultMessage: "Export Variant Weight",
       description: "product field",
       id: "productExportFieldVariantWeight"
-    }),
-    [ProductFieldEnum.VISIBLE]: intl.formatMessage({
-      defaultMessage: "Visibility",
-      description: "product field",
-      id: "productExportFieldVisibility"
     })
   };
 

src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx

@@ -22,6 +22,7 @@ import { buttonMessages } from "@saleor/intl";
 import { makeStyles } from "@saleor/theme";
 import { DialogProps } from "@saleor/types";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
+import { mapCountriesToChoices } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -85,10 +86,7 @@ const ShippingZoneAddWarehouseDialog: React.FC<ShippingZoneAddWarehouseDialogPro
   useModalDialogOpen(open, {});
   const intl = useIntl();
 
-  const countryChoices = countries.map(country => ({
+  const countryChoices = mapCountriesToChoices(countries);
-    label: country.country,
-    value: country.code
-  }));
 
   return (
     <Dialog

src/staff/types/ChangeStaffPassword.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountErrorCode } from "./../../types/globalTypes";
+import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ChangeStaffPassword
@@ -13,6 +13,7 @@ export interface ChangeStaffPassword_passwordChange_errors {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface ChangeStaffPassword_passwordChange {

src/staff/types/StaffAvatarDelete.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountErrorCode } from "./../../types/globalTypes";
+import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: StaffAvatarDelete
@@ -13,6 +13,7 @@ export interface StaffAvatarDelete_userAvatarDelete_errors {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface StaffAvatarDelete_userAvatarDelete_user_avatar {

src/staff/types/StaffAvatarUpdate.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountErrorCode } from "./../../types/globalTypes";
+import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: StaffAvatarUpdate
@@ -13,6 +13,7 @@ export interface StaffAvatarUpdate_userAvatarUpdate_errors {
   __typename: "AccountError";
   code: AccountErrorCode;
   field: string | null;
+  addressType: AddressTypeEnum | null;
 }
 
 export interface StaffAvatarUpdate_userAvatarUpdate_user_avatar {

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

@@ -15639,6 +15639,30 @@ exports[`Storyshots Orders / OrderCustomer with different addresses 1`] = `
 </div>
 `;
 
+exports[`Storyshots Orders / OrderCustomerAddressesEditDialog default 1`] = `
+<div
+  style="padding:24px"
+/>
+`;
+
+exports[`Storyshots Orders / OrderCustomerAddressesEditDialog loading 1`] = `
+<div
+  style="padding:24px"
+/>
+`;
+
+exports[`Storyshots Orders / OrderCustomerAddressesEditDialog no customer addresses 1`] = `
+<div
+  style="padding:24px"
+/>
+`;
+
+exports[`Storyshots Orders / OrderCustomerChangeDialog default 1`] = `
+<div
+  style="padding:24px"
+/>
+`;
+
 exports[`Storyshots Orders / OrderDraftCancelDialog default 1`] = `
 <div
   style="padding:24px"

src/storybook/stories/components/AddressEdit.tsx

@@ -1,6 +1,7 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import AddressEdit from "@saleor/components/AddressEdit";
+import { mapCountriesToChoices } from "@saleor/utils/maps";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -22,10 +23,7 @@ storiesOf("Generics / AddressEdit", module)
         <AddressEdit
           errors={[]}
           data={transformAddressToForm(customer.defaultBillingAddress)}
-          countries={countries.map(c => ({
+          countries={mapCountriesToChoices(countries)}
-            label: c.label,
-            value: c.code
-          }))}
           countryDisplayValue={customer.defaultBillingAddress.country.country}
           onChange={undefined}
           onCountryChange={() => undefined}

src/storybook/stories/customers/CustomerAddressDialog.tsx

@@ -12,8 +12,9 @@ const props: CustomerAddressDialogProps = {
   address: customer.addresses[0],
   confirmButtonState: "default",
   countries: countries.map(c => ({
+    __typename: "CountryDisplay",
     code: c.code,
-    label: c.name
+    country: c.name
   })),
   errors: [],
   onClose: () => undefined,

src/storybook/stories/customers/CustomerCreatePage.tsx

@@ -45,7 +45,8 @@ storiesOf("Views / Customers / Create customer", module)
       ] as Array<keyof CustomerCreatePageFormData>).map(field => ({
         __typename: "AccountError",
         code: AccountErrorCode.INVALID,
-        field
+        field,
+        addressType: null
       }))}
     />
   ));

src/storybook/stories/customers/CustomerDetailsPage.tsx

@@ -43,7 +43,8 @@ storiesOf("Views / Customers / Customer details", module)
       >).map(field => ({
         __typename: "AccountError",
         code: AccountErrorCode.INVALID,
-        field
+        field,
+        addressType: null
       }))}
     />
   ))

src/storybook/stories/orders/OrderCancelDialog.tsx

@@ -35,7 +35,8 @@ storiesOf("Orders / OrderCancelDialog", module)
         {
           __typename: "OrderError",
           code: OrderErrorCode.CANNOT_CANCEL_ORDER,
-          field: null
+          field: null,
+          addressType: null
         }
       ]}
     />

src/storybook/stories/orders/OrderDetailsPage.tsx

@@ -7,7 +7,7 @@ import React from "react";
 import OrderDetailsPage, {
   OrderDetailsPageProps
 } from "../../../orders/components/OrderDetailsPage";
-import { countries, order as orderFixture } from "../../../orders/fixtures";
+import { order as orderFixture } from "../../../orders/fixtures";
 import {
   FulfillmentStatus,
   OrderStatus,
@@ -18,7 +18,6 @@ import Decorator from "../../Decorator";
 const order = orderFixture(placeholderImage);
 
 const props: Omit<OrderDetailsPageProps, "classes"> = {
-  countries,
   disabled: false,
   onBack: () => undefined,
   onBillingAddressEdit: undefined,

src/storybook/stories/orders/OrderDraftCancelDialog.tsx

@@ -26,7 +26,8 @@ storiesOf("Orders / OrderDraftCancelDialog", module)
         {
           __typename: "OrderError",
           code: OrderErrorCode.GRAPHQL_ERROR,
-          field: null
+          field: null,
+          addressType: null
         }
       ]}
     />

src/storybook/stories/orders/OrderDraftPage/OrderDraftPage.tsx

@@ -7,7 +7,7 @@ import React from "react";
 import OrderDraftPage, {
   OrderDraftPageProps
 } from "../../../../orders/components/OrderDraftPage";
-import { clients, countries, draftOrder } from "../../../../orders/fixtures";
+import { clients, draftOrder } from "../../../../orders/fixtures";
 import Decorator from "../../../Decorator";
 import { getDiscountsProvidersWrapper } from "./utils";
 
@@ -15,7 +15,6 @@ const order = draftOrder(placeholderImage);
 
 const props: Omit<OrderDraftPageProps, "classes"> = {
   ...fetchMoreProps,
-  countries,
   disabled: false,
   fetchUsers: () => undefined,
   onBack: () => undefined,

src/storybook/stories/orders/OrderFulfillmentCancelDialog.tsx

@@ -27,7 +27,8 @@ storiesOf("Orders / OrderFulfillmentCancelDialog", module)
         {
           __typename: "OrderError",
           code: OrderErrorCode.GRAPHQL_ERROR,
-          field: null
+          field: null,
+          addressType: null
         }
       ]}
     />

src/storybook/stories/orders/OrderFulfillmentDialog.tsx

@@ -31,12 +31,14 @@ storiesOf("Orders / OrderFulfillmentDialog", module)
         {
           __typename: "OrderError",
           code: OrderErrorCode.FULFILL_ORDER_LINE,
-          field: null
+          field: null,
+          addressType: null
         },
         {
           __typename: "OrderError",
           code: OrderErrorCode.INVALID,
-          field: "trackingNumber"
+          field: "trackingNumber",
+          addressType: null
         }
       ]}
     />

src/storybook/stories/orders/OrderFulfillmentTrackingDialog.tsx

@@ -26,12 +26,14 @@ storiesOf("Orders / OrderFulfillmentTrackingDialog", module)
         {
           __typename: "OrderError",
           code: OrderErrorCode.GRAPHQL_ERROR,
-          field: null
+          field: null,
+          addressType: null
         },
         {
           __typename: "OrderError",
           code: OrderErrorCode.INVALID,
-          field: "trackingNumber"
+          field: "trackingNumber",
+          addressType: null
         }
       ]}
     />

src/storybook/stories/orders/OrderMarkAsPaidDialog.tsx

@@ -27,7 +27,8 @@ storiesOf("Orders / OrderMarkAsPaidDialog", module)
         {
           __typename: "OrderError",
           code: OrderErrorCode.GRAPHQL_ERROR,
-          field: null
+          field: null,
+          addressType: null
         }
       ]}
     />

src/storybook/stories/orders/OrderPaymentDialog.tsx

@@ -26,12 +26,14 @@ storiesOf("Orders / OrderPaymentDialog", module)
         {
           __typename: "OrderError",
           code: OrderErrorCode.CAPTURE_INACTIVE_PAYMENT,
-          field: null
+          field: null,
+          addressType: null
         },
         {
           __typename: "OrderError",
           code: OrderErrorCode.INVALID,
-          field: "payment"
+          field: "payment",
+          addressType: null
         }
       ]}
     />

src/storybook/stories/orders/OrderPaymentVoidDialog.tsx

@@ -25,7 +25,8 @@ storiesOf("Orders / OrderPaymentVoidDialog", module)
         {
           __typename: "OrderError",
           code: OrderErrorCode.VOID_INACTIVE_PAYMENT,
-          field: null
+          field: null,
+          addressType: null
         }
       ]}
     />