merge with master

2021-03-01 13:07:05 +01:00 · 2021-03-01 13:07:05 +01:00 · dfdf43fed5
commit dfdf43fed5
parent 6e6b9956ef 4e99c7bcdf
119 changed files with 1359 additions and 1404 deletions
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -70,6 +70,7 @@ jobs:
          npm run test

  cypress-run:
+    if: github.event.pull_request.head.repo.full_name == 'mirumee/saleor-dashboard'
    runs-on: ubuntu-16.04
    steps:
      - name: Checkout
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -21,6 +21,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add OAuth2 login with OpenID support - #963 by @orzechdev
 - Fix no channels crash - #984 by @dominik-zeglen
 - Update webhooks - #982 by @piotrgrundas
+- Fix trigger form change when collections are being added to list of product collections - #987 by @gax97

 # 2.11.1

--- a/Dockerfile.dev
+++ b/Dockerfile.dev
@ -8,8 +8,8 @@ ARG APP_MOUNT_URI
 ARG API_URI
 ARG STATIC_URL
 ENV API_URI ${API_URI:-http://localhost:8000/graphql/}
-ENV APP_MOUNT_URI ${APP_MOUNT_URI:-/dashboard/}
-ENV STATIC_URL ${STATIC_URL:-/dashboard/}
+ENV APP_MOUNT_URI ${APP_MOUNT_URI:-/}
+ENV STATIC_URL ${STATIC_URL:-/}

 EXPOSE 9000
 CMD npm start -- --host 0.0.0.0
--- a/cypress/apiRequests/storeFront/ProductDetails.js
+++ b/cypress/apiRequests/storeFront/ProductDetails.js
@ -12,7 +12,7 @@ class ProductDetails {
        availableForPurchase
      }
    }`;
-    return cy.sendFrontShopRequestWithQuery(query);
+    return cy.sendRequestWithQuery(query, "token");
  }
 }
 export default ProductDetails;
--- a/cypress/apiRequests/storeFront/Search.js
+++ b/cypress/apiRequests/storeFront/Search.js
@ -14,7 +14,7 @@ class Search {
        }
      }`;

-    return cy.sendFrontShopRequestWithQuery(query);
+    return cy.sendRequestWithQuery(query, "token");
  }
 }
 export default Search;
--- a/cypress/integration/products/menageProducts/availableForPurchaseProducts.js
+++ b/cypress/integration/products/menageProducts/availableForPurchaseProducts.js
@ -5,7 +5,7 @@ import { productDetailsUrl } from "../../../url/urlList";
 import ChannelsUtils from "../../../utils/channelsUtils";
 import ProductsUtils from "../../../utils/productsUtils";
 import ShippingUtils from "../../../utils/shippingUtils";
-import StoreFrontProductUtils from "../../../utils/storeFront/storeFrontProductUtils";
+import { isProductAvailableForPurchase } from "../../../utils/storeFront/storeFrontProductUtils";

 // <reference types="cypress" />
 describe("Products available in listings", () => {
@ -13,7 +13,6 @@ describe("Products available in listings", () => {
  const channelsUtils = new ChannelsUtils();
  const productsUtils = new ProductsUtils();
  const productSteps = new ProductSteps();
-  const frontShopProductUtils = new StoreFrontProductUtils();
  const startsWith = "Cy-";
  const name = `${startsWith}${faker.random.number()}`;
  let productType;
@ -74,14 +73,14 @@ describe("Products available in listings", () => {
        productSteps.updateProductIsAvailableForPurchase(productUrl, true);
      })
      .then(() => {
-        frontShopProductUtils.isProductAvailableForPurchase(
+        isProductAvailableForPurchase(
          productsUtils.getCreatedProduct().id,
          defaultChannel.slug,
          productName
        );
      })
-      .then(isProductVisible => {
-        expect(isProductVisible).to.be.eq(true);
+      .then(isVisibleResp => {
+        expect(isVisibleResp).to.be.eq(true);
      });
  });
  it("should update product to not available for purchase", () => {
@ -102,7 +101,7 @@ describe("Products available in listings", () => {
        productSteps.updateProductIsAvailableForPurchase(productUrl, false);
      })
      .then(() => {
-        frontShopProductUtils.isProductAvailableForPurchase(
+        isProductAvailableForPurchase(
          productsUtils.getCreatedProduct().id,
          defaultChannel.slug,
          productName
--- a/cypress/integration/products/menageProducts/publishedProducts.js
+++ b/cypress/integration/products/menageProducts/publishedProducts.js
@ -4,14 +4,13 @@ import ProductSteps from "../../../steps/productSteps";
 import { productDetailsUrl } from "../../../url/urlList";
 import ChannelsUtils from "../../../utils/channelsUtils";
 import ProductsUtils from "../../../utils/productsUtils";
-import StoreFrontProductUtils from "../../../utils/storeFront/storeFrontProductUtils";
+import { isProductVisible } from "../../../utils/storeFront/storeFrontProductUtils";

 // <reference types="cypress" />
 describe("Published products", () => {
  const channelsUtils = new ChannelsUtils();
  const productsUtils = new ProductsUtils();
  const productSteps = new ProductSteps();
-  const frontShopProductUtils = new StoreFrontProductUtils();

  const startsWith = "Cy-";
  const name = `${startsWith}${faker.random.number()}`;
@ -53,11 +52,7 @@ describe("Published products", () => {
        const product = productsUtils.getCreatedProduct();
        const productUrl = productDetailsUrl(product.id);
        productSteps.updateProductPublish(productUrl, true);
-        frontShopProductUtils.isProductVisible(
-          product.id,
-          defaultChannel.slug,
-          productName
-        );
+        isProductVisible(product.id, defaultChannel.slug, productName);
      })
      .then(isVisible => {
        expect(isVisible).to.be.eq(true);
@ -84,22 +79,14 @@ describe("Published products", () => {
        product = productsUtils.getCreatedProduct();
        const productUrl = productDetailsUrl(product.id);
        productSteps.updateProductPublish(productUrl, false);
-        frontShopProductUtils.isProductVisible(
-          product.id,
-          defaultChannel.slug,
-          productName
-        );
+        isProductVisible(product.id, defaultChannel.slug, productName);
      })
      .then(isVisible => {
        expect(isVisible).to.be.eq(false);
        cy.loginInShop();
      })
      .then(() => {
-        frontShopProductUtils.isProductVisible(
-          product.id,
-          defaultChannel.slug,
-          productName
-        );
+        isProductVisible(product.id, defaultChannel.slug, productName);
      })
      .then(isVisible => {
        expect(isVisible).to.be.eq(true);
--- a/cypress/integration/products/menageProducts/visibleInListingsProducts.js
+++ b/cypress/integration/products/menageProducts/visibleInListingsProducts.js
@ -4,14 +4,13 @@ import ProductSteps from "../../../steps/productSteps";
 import { productDetailsUrl } from "../../../url/urlList";
 import ChannelsUtils from "../../../utils/channelsUtils";
 import ProductsUtils from "../../../utils/productsUtils";
-import StoreFrontProductUtils from "../../../utils/storeFront/storeFrontProductUtils";
+import { isProductVisibleInSearchResult } from "../../../utils/storeFront/storeFrontProductUtils";

 // <reference types="cypress" />
 describe("Products displayed in listings", () => {
  const channelsUtils = new ChannelsUtils();
  const productsUtils = new ProductsUtils();
  const productSteps = new ProductSteps();
-  const frontShopProductUtils = new StoreFrontProductUtils();

  const startsWith = "Cy-";
  const name = `${startsWith}${faker.random.number()}`;
@ -53,10 +52,7 @@ describe("Products displayed in listings", () => {
        const product = productsUtils.getCreatedProduct();
        const productUrl = productDetailsUrl(product.id);
        productSteps.updateProductVisibleInListings(productUrl);
-        frontShopProductUtils.isProductVisibleInSearchResult(
-          productName,
-          defaultChannel.slug
-        );
+        isProductVisibleInSearchResult(productName, defaultChannel.slug);
      })
      .then(isProductVisible => {
        expect(isProductVisible).to.be.eq(true);
@ -82,18 +78,15 @@ describe("Products displayed in listings", () => {
        const product = productsUtils.getCreatedProduct();
        const productUrl = productDetailsUrl(product.id);
        productSteps.updateProductVisibleInListings(productUrl);
-        frontShopProductUtils
-          .isProductVisibleInSearchResult(productName, defaultChannel.slug)
-          .then(isProductVisible => {
+        isProductVisibleInSearchResult(productName, defaultChannel.slug).then(
+          isProductVisible => {
            expect(isProductVisible).to.be.eq(false);
-          });
+          }
+        );
        cy.loginInShop();
      })
      .then(() => {
-        frontShopProductUtils.isProductVisibleInSearchResult(
-          productName,
-          defaultChannel.slug
-        );
+        isProductVisibleInSearchResult(productName, defaultChannel.slug);
      })
      .then(isProductVisible => {
        expect(isProductVisible).to.be.eq(true);
--- a/cypress/support/index.js
+++ b/cypress/support/index.js
@ -39,9 +39,6 @@ Cypress.Commands.add("addAliasToGraphRequest", operationName => {
  });
 });

-Cypress.Commands.add("sendFrontShopRequestWithQuery", query =>
-  cy.sendRequestWithQuery(query, "token")
-);
 Cypress.Commands.add("sendRequestWithQuery", (query, authorization = "auth") =>
  cy.request({
    body: {
--- a/cypress/utils/storeFront/storeFrontProductUtils.js
+++ b/cypress/utils/storeFront/storeFrontProductUtils.js
@ -1,34 +1,32 @@
 import ProductDetails from "../../apiRequests/storeFront/ProductDetails";
 import Search from "../../apiRequests/storeFront/Search";

-class StoreFrontProductUtils {
-  isProductVisible(productId, channelSlug, name) {
-    const productDetails = new ProductDetails();
-    return productDetails
-      .getProductDetails(productId, channelSlug)
-      .then(productDetailsResp => {
-        const product = productDetailsResp.body.data.product;
-        return product !== null && product.name === name;
-      });
-  }
-  isProductAvailableForPurchase(productId, channelSlug) {
-    const productDetails = new ProductDetails();
-    return productDetails
-      .getProductDetails(productId, channelSlug)
-      .then(
-        productDetailsResp =>
-          productDetailsResp.body.data.product.isAvailableForPurchase
-      );
-  }
-  isProductVisibleInSearchResult(productName, channelSlug) {
-    const search = new Search();
-    return search
-      .searchInShop(productName, channelSlug)
-      .then(
-        resp =>
-          resp.body.data.products.totalCount !== 0 &&
-          resp.body.data.products.edges[0].node.name === productName
-      );
-  }
-}
-export default StoreFrontProductUtils;
+export const isProductVisible = (productId, channelSlug, name) => {
+  const productDetails = new ProductDetails();
+  return productDetails
+    .getProductDetails(productId, channelSlug)
+    .then(productDetailsResp => {
+      const product = productDetailsResp.body.data.product;
+      return product !== null && product.name === name;
+    });
+};
+
+export const isProductAvailableForPurchase = (productId, channelSlug) => {
+  const productDetails = new ProductDetails();
+  return productDetails
+    .getProductDetails(productId, channelSlug)
+    .then(
+      productDetailsResp =>
+        productDetailsResp.body.data.product.isAvailableForPurchase
+    );
+};
+export const isProductVisibleInSearchResult = (productName, channelSlug) => {
+  const search = new Search();
+  return search
+    .searchInShop(productName, channelSlug)
+    .then(
+      resp =>
+        resp.body.data.products.totalCount !== 0 &&
+        resp.body.data.products.edges[0].node.name === productName
+    );
+};
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@ -5603,13 +5603,6 @@
    "context": "label",
    "string": "Shipping rate name"
  },
-  "src_dot_shipping_dot_components_dot_ShippingRateZipCodeRangeRemoveDialog_dot_3640694505": {
-    "string": "Are you sure you want to remove this postal code rule?"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingRateZipCodeRangeRemoveDialog_dot_76039652": {
-    "context": "header",
-    "string": "Remove postal codes from Shipping Rate"
-  },
  "src_dot_shipping_dot_components_dot_ShippingWeightUnitForm_dot_2863708228": {
    "string": "This unit will be used as default shipping weight"
  },
@ -5693,6 +5686,54 @@
    "context": "label",
    "string": "Shipping zone name"
  },
+  "src_dot_shipping_dot_components_dot_ShippingZonePostalCodeRangeDialog_dot_3070993206": {
+    "context": "range input label",
+    "string": "Postal codes (end)"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZonePostalCodeRangeDialog_dot_3099331554": {
+    "context": "add postal code range, button",
+    "string": "Add"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZonePostalCodeRangeDialog_dot_3419096551": {
+    "context": "range input label",
+    "string": "Postal codes (start)"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZonePostalCodeRangeDialog_dot_3668595137": {
+    "string": "Please provide range of postal codes you want to add to the include/exclude list."
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZonePostalCodeRangeDialog_dot_3849853790": {
+    "context": "dialog header",
+    "string": "Add postal codes"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZonePostalCodes_dot_1301350004": {
+    "string": "This shipping rate has no postal codes assigned"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZonePostalCodes_dot_1680649143": {
+    "context": "action",
+    "string": "Include postal codes"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZonePostalCodes_dot_1779803917": {
+    "string": "Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZonePostalCodes_dot_1909179974": {
+    "context": "button",
+    "string": "Add postal code range"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZonePostalCodes_dot_2274108851": {
+    "context": "number of postal code ranges",
+    "string": "{number} postal code ranges"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZonePostalCodes_dot_2965119249": {
+    "string": "Only added postal codes will be able to use this shipping rate"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZonePostalCodes_dot_3782353530": {
+    "context": "postal codes, header",
+    "string": "Postal codes"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZonePostalCodes_dot_399764149": {
+    "context": "action",
+    "string": "Exclude postal codes"
+  },
  "src_dot_shipping_dot_components_dot_ShippingZoneRatesCreatePage_dot_1161979494": {
    "context": "page title",
    "string": "Price Rate Create"
@ -5753,54 +5794,6 @@
    "context": "input placeholder",
    "string": "Select Warehouse"
  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneZipCodeRangeDialog_dot_3070993206": {
-    "context": "range input label",
-    "string": "Postal codes (end)"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneZipCodeRangeDialog_dot_3099331554": {
-    "context": "add postal code range, button",
-    "string": "Add"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneZipCodeRangeDialog_dot_3419096551": {
-    "context": "range input label",
-    "string": "Postal codes (start)"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneZipCodeRangeDialog_dot_3668595137": {
-    "string": "Please provide range of postal codes you want to add to the include/exclude list."
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneZipCodeRangeDialog_dot_3849853790": {
-    "context": "dialog header",
-    "string": "Add postal codes"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneZipCodes_dot_1301350004": {
-    "string": "This shipping rate has no postal codes assigned"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneZipCodes_dot_1680649143": {
-    "context": "action",
-    "string": "Include postal codes"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneZipCodes_dot_1779803917": {
-    "string": "Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneZipCodes_dot_1909179974": {
-    "context": "button",
-    "string": "Add postal code range"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneZipCodes_dot_2274108851": {
-    "context": "number of postal code ranges",
-    "string": "{number} postal code ranges"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneZipCodes_dot_2965119249": {
-    "string": "Only added postal codes will be able to use this shipping rate"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneZipCodes_dot_3782353530": {
-    "context": "postal codes, header",
-    "string": "Postal codes"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneZipCodes_dot_399764149": {
-    "context": "action",
-    "string": "Exclude postal codes"
-  },
  "src_dot_shipping_dot_components_dot_ShippingZonesListPage_dot_1325966144": {
    "context": "header",
    "string": "Shipping"
@ -5860,10 +5853,6 @@
  "src_dot_shipping_dot_views_dot_PriceRatesUpdate_dot_3823295269": {
    "string": "Manage Channel Availability"
  },
-  "src_dot_shipping_dot_views_dot_PriceRatesUpdate_dot_4243341946": {
-    "context": "postal code range add error text",
-    "string": "Cannot add specified postal codes range."
-  },
  "src_dot_shipping_dot_views_dot_PriceRatesUpdate_dot_870815507": {
    "context": "unassign products from shipping method, button",
    "string": "Unassign"
@ -5886,10 +5875,6 @@
  "src_dot_shipping_dot_views_dot_WeightRatesUpdate_dot_3014453080": {
    "string": "Manage Channels Availability"
  },
-  "src_dot_shipping_dot_views_dot_WeightRatesUpdate_dot_4243341946": {
-    "context": "postal code range add error text",
-    "string": "Cannot add specified postal codes range."
-  },
  "src_dot_shipping_dot_views_dot_WeightRatesUpdate_dot_870815507": {
    "context": "unassign products from shipping method, button",
    "string": "Unassign"
--- a/schema.graphql
+++ b/schema.graphql
@ -671,7 +671,7 @@ type Category implements Node & ObjectWithMetadata {
  seoDescription: String
  id: ID!
  name: String!
-  description: JSONString!
+  description: JSONString
  slug: String!
  parent: Category
  level: Int!
@ -746,7 +746,7 @@ type CategoryTranslatableContent implements Node {
  seoDescription: String
  id: ID!
  name: String!
-  description: JSONString!
+  description: JSONString
  descriptionJson: JSONString @deprecated(reason: "Will be removed in Saleor 4.0. Use the `description` field instead.")
  translation(languageCode: LanguageCodeEnum!): CategoryTranslation
  category: Category
@ -763,7 +763,7 @@ type CategoryTranslation implements Node {
  seoDescription: String
  id: ID!
  name: String!
-  description: JSONString!
+  description: JSONString
  language: LanguageDisplay!
  descriptionJson: JSONString @deprecated(reason: "Will be removed in Saleor 4.0. Use the `description` field instead.")
 }
@ -1050,7 +1050,7 @@ type Collection implements Node & ObjectWithMetadata {
  seoDescription: String
  id: ID!
  name: String!
-  description: JSONString!
+  description: JSONString
  slug: String!
  privateMetadata: [MetadataItem]!
  metadata: [MetadataItem]!
@ -1205,7 +1205,7 @@ type CollectionTranslatableContent implements Node {
  seoDescription: String
  id: ID!
  name: String!
-  description: JSONString!
+  description: JSONString
  descriptionJson: JSONString @deprecated(reason: "Will be removed in Saleor 4.0. Use the `description` field instead.")
  translation(languageCode: LanguageCodeEnum!): CollectionTranslation
  collection: Collection
@ -1222,7 +1222,7 @@ type CollectionTranslation implements Node {
  seoDescription: String
  id: ID!
  name: String!
-  description: JSONString!
+  description: JSONString
  language: LanguageDisplay!
  descriptionJson: JSONString @deprecated(reason: "Will be removed in Saleor 4.0. Use the `description` field instead.")
 }
@ -2607,8 +2607,6 @@ type Mutation {
  shopAddressUpdate(input: AddressInput): ShopAddressUpdate
  orderSettingsUpdate(input: OrderSettingsUpdateInput!): OrderSettingsUpdate
  shippingMethodChannelListingUpdate(id: ID!, input: ShippingMethodChannelListingInput!): ShippingMethodChannelListingUpdate
-  shippingMethodZipCodeRulesCreate(input: ShippingZipCodeRulesCreateInput!, shippingMethodId: ID!): ShippingZipCodeRulesCreate
-  shippingMethodZipCodeRulesDelete(id: ID!): ShippingZipCodeRulesDelete
  shippingPriceCreate(input: ShippingPriceInput!): ShippingPriceCreate
  shippingPriceDelete(id: ID!): ShippingPriceDelete
  shippingPriceBulkDelete(ids: [ID]!): ShippingPriceBulkDelete
@ -3307,7 +3305,7 @@ type Page implements Node & ObjectWithMetadata {
  seoDescription: String
  id: ID!
  title: String!
-  content: JSONString!
+  content: JSONString
  publicationDate: Date
  isPublished: Boolean!
  slug: String!
@ -3441,7 +3439,7 @@ type PageTranslatableContent implements Node {
  seoDescription: String
  id: ID!
  title: String!
-  content: JSONString!
+  content: JSONString
  contentJson: JSONString @deprecated(reason: "Will be removed in Saleor 4.0. Use the `content` field instead.")
  translation(languageCode: LanguageCodeEnum!): PageTranslation
  page: Page
@ -3458,7 +3456,7 @@ type PageTranslation implements Node {
  seoDescription: String
  id: ID!
  title: String!
-  content: JSONString!
+  content: JSONString
  language: LanguageDisplay!
  contentJson: JSONString @deprecated(reason: "Will be removed in Saleor 4.0. Use the `content` field instead.")
 }
@ -3824,6 +3822,11 @@ input PluginUpdateInput {

 scalar PositiveDecimal

+enum PostalCodeRuleInclusionTypeEnum {
+  INCLUDE
+  EXCLUDE
+}
+
 input PriceRangeInput {
  gte: Float
  lte: Float
@ -3834,7 +3837,7 @@ type Product implements Node & ObjectWithMetadata {
  seoTitle: String
  seoDescription: String
  name: String!
-  description: JSONString!
+  description: JSONString
  productType: ProductType!
  slug: String!
  category: Category
@ -4140,7 +4143,7 @@ type ProductTranslatableContent implements Node {
  seoTitle: String
  seoDescription: String
  name: String!
-  description: JSONString!
+  description: JSONString
  descriptionJson: JSONString @deprecated(reason: "Will be removed in Saleor 4.0. Use the `description` field instead.")
  translation(languageCode: LanguageCodeEnum!): ProductTranslation
  product: Product
@ -4157,7 +4160,7 @@ type ProductTranslation implements Node {
  seoTitle: String
  seoDescription: String
  name: String!
-  description: JSONString!
+  description: JSONString
  language: LanguageDisplay!
  descriptionJson: JSONString @deprecated(reason: "Will be removed in Saleor 4.0. Use the `description` field instead.")
 }
@ -4746,7 +4749,7 @@ type ShippingMethod implements Node & ObjectWithMetadata {
  price: Money
  maximumOrderPrice: Money
  minimumOrderPrice: Money
-  zipCodeRules: [ShippingMethodZipCodeRule]
+  postalCodeRules: [ShippingMethodPostalCodeRule]
  excludedProducts(before: String, after: String, first: Int, last: Int): ProductCountableConnection
 }

@ -4776,6 +4779,13 @@ type ShippingMethodChannelListingUpdate {
  shippingErrors: [ShippingError!]!
 }

+type ShippingMethodPostalCodeRule implements Node {
+  start: String
+  end: String
+  inclusionType: PostalCodeRuleInclusionTypeEnum
+  id: ID!
+}
+
 type ShippingMethodTranslatableContent implements Node {
  id: ID!
  name: String!
@ -4794,10 +4804,9 @@ enum ShippingMethodTypeEnum {
  WEIGHT
 }

-type ShippingMethodZipCodeRule implements Node {
-  start: String
+input ShippingPostalCodeRulesCreateInputRange {
+  start: String!
  end: String
-  id: ID!
 }

 type ShippingPriceBulkDelete {
@ -4838,6 +4847,9 @@ input ShippingPriceInput {
  minimumDeliveryDays: Int
  type: ShippingMethodTypeEnum
  shippingZone: ID
+  addPostalCodeRules: [ShippingPostalCodeRulesCreateInputRange!]
+  deletePostalCodeRules: [ID!]
+  inclusionType: PostalCodeRuleInclusionTypeEnum
 }

 type ShippingPriceRemoveProductFromExclude {
@ -4859,29 +4871,6 @@ type ShippingPriceUpdate {
  shippingErrors: [ShippingError!]!
 }

-type ShippingZipCodeRulesCreate {
-  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
-  zipCodeRules: [ShippingMethodZipCodeRule]
-  shippingMethod: ShippingMethod
-  shippingErrors: [ShippingError!]!
-}
-
-input ShippingZipCodeRulesCreateInput {
-  zipCodeRules: [ShippingZipCodeRulesCreateInputRange]!
-}
-
-input ShippingZipCodeRulesCreateInputRange {
-  start: String!
-  end: String
-}
-
-type ShippingZipCodeRulesDelete {
-  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
-  shippingMethod: ShippingMethod
-  shippingErrors: [ShippingError!]!
-  shippingMethodZipCodeRule: ShippingMethodZipCodeRule
-}
-
 type ShippingZone implements Node & ObjectWithMetadata {
  id: ID!
  name: String!
--- a/src/categories/types/CategoryCreate.ts
+++ b/src/categories/types/CategoryCreate.ts
@ -39,7 +39,7 @@ export interface CategoryCreate_categoryCreate_category {
  backgroundImage: CategoryCreate_categoryCreate_category_backgroundImage | null;
  name: string;
  slug: string;
-  description: any;
+  description: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
  parent: CategoryCreate_categoryCreate_category_parent | null;
--- a/src/categories/types/CategoryDetails.ts
+++ b/src/categories/types/CategoryDetails.ts
@ -165,7 +165,7 @@ export interface CategoryDetails_category {
  backgroundImage: CategoryDetails_category_backgroundImage | null;
  name: string;
  slug: string;
-  description: any;
+  description: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
  parent: CategoryDetails_category_parent | null;
--- a/src/categories/types/CategoryUpdate.ts
+++ b/src/categories/types/CategoryUpdate.ts
@ -39,7 +39,7 @@ export interface CategoryUpdate_categoryUpdate_category {
  backgroundImage: CategoryUpdate_categoryUpdate_category_backgroundImage | null;
  name: string;
  slug: string;
-  description: any;
+  description: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
  parent: CategoryUpdate_categoryUpdate_category_parent | null;
--- a/src/categories/views/CategoryCreate.tsx
+++ b/src/categories/views/CategoryCreate.tsx
@ -1,6 +1,7 @@
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import { getParsedDataForJsonStringField } from "@saleor/translations/utils";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
 import {
  useMetadataUpdate,
@ -48,7 +49,7 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
    const result = await createCategory({
      variables: {
        input: {
-          description: JSON.stringify(formData.description),
+          description: getParsedDataForJsonStringField(formData.description),
          name: formData.name,
          seo: {
            description: formData.seoDescription,
--- a/src/categories/views/CategoryDetails.tsx
+++ b/src/categories/views/CategoryDetails.tsx
@ -13,6 +13,7 @@ import usePaginator, {
  createPaginationState
 } from "@saleor/hooks/usePaginator";
 import { commonMessages } from "@saleor/intl";
+import { getParsedDataForJsonStringField } from "@saleor/translations/utils";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
 import { mapNodeToChoice } from "@saleor/utils/maps";
@ -188,7 +189,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
        id,
        input: {
          backgroundImageAlt: formData.backgroundImageAlt,
-          description: JSON.stringify(formData.description),
+          description: getParsedDataForJsonStringField(formData.description),
          name: formData.name,
          seo: {
            description: formData.seoDescription,
--- a/src/channels/components/ChannelDeleteDialog/ChannelDeleteDialog.stories.tsx
+++ b/src/channels/components/ChannelDeleteDialog/ChannelDeleteDialog.stories.tsx
@ -10,8 +10,8 @@ import ChannelDeleteDialog, {

 const props: ChannelDeleteDialogProps = {
  channelsChoices: mapNodeToChoice(channelsList),
-  hasOrders: true,
  confirmButtonState: "default",
+  hasOrders: true,
  onBack: () => undefined,
  onClose: () => undefined,
  onConfirm: () => undefined,
--- a/src/channels/components/ChannelDeleteDialog/ChannelDeleteDialog.tsx
+++ b/src/channels/components/ChannelDeleteDialog/ChannelDeleteDialog.tsx
@ -13,16 +13,20 @@ import { defineMessages, useIntl } from "react-intl";
 import { useStyles } from "../styles";

 const messages = defineMessages({
-  needToBeMoved: {
-    defaultMessage:
-      "All order information from this channel need to be moved to a different channel. Please select channel orders need to be moved to:.",
-    description: "delete channel"
+  deleteChannel: {
+    defaultMessage: "Delete Channel",
+    description: "dialog header"
  },
  deletingAllProductData: {
    defaultMessage:
      "Deleting channel will delete all product data regarding this channel. Are you sure you want to delete this channel?",
    description: "delete channel"
  },
+  needToBeMoved: {
+    defaultMessage:
+      "All order information from this channel need to be moved to a different channel. Please select channel orders need to be moved to:.",
+    description: "delete channel"
+  },
  noAvailableChannel: {
    defaultMessage:
      "There is no available channel to move order information to. Please create a channel with same currency so that information can be moved to it.",
@ -31,10 +35,6 @@ const messages = defineMessages({
  selectChannel: {
    defaultMessage: "Select Channel",
    description: "dialog header"
-  },
-  deleteChannel: {
-    defaultMessage: "Delete Channel",
-    description: "dialog header"
  }
 });

--- a/src/channels/fixtures.ts
+++ b/src/channels/fixtures.ts
@ -72,8 +72,8 @@ export const channelsList: Channels_channels[] = [
  {
    __typename: "Channel",
    currencyCode: "euro",
-    id: "Q2hhbm5lbDo5w0z",
    hasOrders: false,
+    id: "Q2hhbm5lbDo5w0z",
    isActive: true,
    name: "Channel USD",
    slug: "channel-usd1"
--- a/src/collections/types/CollectionDetails.ts
+++ b/src/collections/types/CollectionDetails.ts
@ -102,7 +102,7 @@ export interface CollectionDetails_collection {
  privateMetadata: (CollectionDetails_collection_privateMetadata | null)[];
  backgroundImage: CollectionDetails_collection_backgroundImage | null;
  slug: string;
-  description: any;
+  description: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
  products: CollectionDetails_collection_products | null;
--- a/src/collections/types/CollectionUpdate.ts
+++ b/src/collections/types/CollectionUpdate.ts
@ -48,7 +48,7 @@ export interface CollectionUpdate_collectionUpdate_collection {
  privateMetadata: (CollectionUpdate_collectionUpdate_collection_privateMetadata | null)[];
  backgroundImage: CollectionUpdate_collectionUpdate_collection_backgroundImage | null;
  slug: string;
-  description: any;
+  description: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
 }
--- a/src/collections/types/CreateCollection.ts
+++ b/src/collections/types/CreateCollection.ts
@ -48,7 +48,7 @@ export interface CreateCollection_collectionCreate_collection {
  privateMetadata: (CreateCollection_collectionCreate_collection_privateMetadata | null)[];
  backgroundImage: CreateCollection_collectionCreate_collection_backgroundImage | null;
  slug: string;
-  description: any;
+  description: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
 }
--- a/src/collections/views/CollectionCreate.tsx
+++ b/src/collections/views/CollectionCreate.tsx
@ -7,6 +7,7 @@ import useChannels from "@saleor/hooks/useChannels";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
+import { getParsedDataForJsonStringField } from "@saleor/translations/utils";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
 import {
@ -102,7 +103,7 @@ export const CollectionCreate: React.FC<CollectionCreateProps> = ({
        input: {
          backgroundImage: formData.backgroundImage.value,
          backgroundImageAlt: formData.backgroundImageAlt,
-          description: JSON.stringify(formData.description),
+          description: getParsedDataForJsonStringField(formData.description),
          name: formData.name,
          seo: {
            description: formData.seoDescription,
--- a/src/collections/views/CollectionDetails.tsx
+++ b/src/collections/views/CollectionDetails.tsx
@ -21,6 +21,7 @@ import usePaginator, {
 } from "@saleor/hooks/usePaginator";
 import { commonMessages } from "@saleor/intl";
 import useProductSearch from "@saleor/searches/useProductSearch";
+import { getParsedDataForJsonStringField } from "@saleor/translations/utils";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
 import {
@ -198,7 +199,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
        const handleUpdate = async (formData: CollectionUpdateData) => {
          const input: CollectionInput = {
            backgroundImageAlt: formData.backgroundImageAlt,
-            description: JSON.stringify(formData.description),
+            description: getParsedDataForJsonStringField(formData.description),
            name: formData.name,
            seo: {
              description: formData.seoDescription,
--- a/src/customers/components/CustomerAddress/CustomerAddress.tsx
+++ b/src/customers/components/CustomerAddress/CustomerAddress.tsx
@ -26,26 +26,26 @@ const messages = defineMessages({
  defaultAddress: {
    defaultMessage: "Default Address"
  },
-  defaultShippingAddress: {
-    defaultMessage: "Default Shipping Address"
-  },
  defaultBillingAddress: {
    defaultMessage: "Default Billing Address"
  },
-  setDefaultShipping: {
-    defaultMessage: "Set as default shipping address",
-    description: "button"
+  defaultShippingAddress: {
+    defaultMessage: "Default Shipping Address"
  },
-  setDefaultBilling: {
-    defaultMessage: "Set as default billing address",
+  deleteAddress: {
+    defaultMessage: "Delete Address",
    description: "button"
  },
  editAddress: {
    defaultMessage: "Edit Address",
    description: "button"
  },
-  deleteAddress: {
-    defaultMessage: "Delete Address",
+  setDefaultBilling: {
+    defaultMessage: "Set as default billing address",
+    description: "button"
+  },
+  setDefaultShipping: {
+    defaultMessage: "Set as default shipping address",
    description: "button"
  }
 });
--- a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
+++ b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
@ -23,6 +23,14 @@ export interface CustomerAddressListPageProps {
 }

 const messages = defineMessages({
+  addAddress: {
+    defaultMessage: "Add address",
+    description: "button"
+  },
+  doesntHaveAddresses: {
+    defaultMessage:
+      "This customer doesn’t have any adresses added to his address book. You can add address using the button below."
+  },
  fullNameAddress: {
    defaultMessage: "{fullName}'s Address Book",
    description: "customer's address book, header"
@ -31,16 +39,8 @@ const messages = defineMessages({
    defaultMessage: "{fullName} Details",
    description: "customer details, header"
  },
-  addAddress: {
-    defaultMessage: "Add address",
-    description: "button"
-  },
  noAddressToShow: {
    defaultMessage: "There is no address to show for this customer"
-  },
-  doesntHaveAddresses: {
-    defaultMessage:
-      "This customer doesn’t have any adresses added to his address book. You can add address using the button below."
  }
 });

--- a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
+++ b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
@ -64,8 +64,8 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
    firstName: customer?.firstName || "",
    isActive: customer?.isActive || false,
    lastName: customer?.lastName || "",
-    note: customer?.note || "",
    metadata: customer?.metadata.map(mapMetadataItemToInput),
+    note: customer?.note || "",
    privateMetadata: customer?.privateMetadata.map(mapMetadataItemToInput)
  };

--- a/src/customers/fixtures.ts
+++ b/src/customers/fixtures.ts
@ -946,8 +946,6 @@ export const customerList: ListCustomers_customers_edges_node[] = [
 ];
 export const customer: CustomerDetails_user & CustomerAddresses_user = {
  __typename: "User",
-  metadata: [],
-  privateMetadata: [],
  addresses: [
    {
      __typename: "Address",
@ -1046,6 +1044,7 @@ export const customer: CustomerDetails_user & CustomerAddresses_user = {
      }
    ]
  },
+  metadata: [],
  note: null,
  orders: {
    __typename: "OrderCountableConnection",
@ -1069,5 +1068,6 @@ export const customer: CustomerDetails_user & CustomerAddresses_user = {
        }
      }
    ]
-  }
+  },
+  privateMetadata: []
 };
--- a/src/fragments/shipping.ts
+++ b/src/fragments/shipping.ts
@ -17,11 +17,12 @@ export const shippingZoneFragment = gql`
  }
 `;

-export const shippingMethodWithZipCodesFragment = gql`
-  fragment ShippingMethodWithZipCodesFragment on ShippingMethod {
+export const shippingMethodWithPostalCodesFragment = gql`
+  fragment ShippingMethodWithPostalCodesFragment on ShippingMethod {
    id
-    zipCodeRules {
+    postalCodeRules {
      id
+      inclusionType
      start
      end
    }
@ -30,9 +31,9 @@ export const shippingMethodWithZipCodesFragment = gql`
 export const shippingMethodFragment = gql`
  ${metadataFragment}
  ${fragmentMoney}
-  ${shippingMethodWithZipCodesFragment}
+  ${shippingMethodWithPostalCodesFragment}
  fragment ShippingMethodFragment on ShippingMethod {
-    ...ShippingMethodWithZipCodesFragment
+    ...ShippingMethodWithPostalCodesFragment
    ...MetadataFragment
    minimumOrderWeight {
      unit
--- a/src/fragments/types/CategoryDetailsFragment.ts
+++ b/src/fragments/types/CategoryDetailsFragment.ts
@ -37,7 +37,7 @@ export interface CategoryDetailsFragment {
  backgroundImage: CategoryDetailsFragment_backgroundImage | null;
  name: string;
  slug: string;
-  description: any;
+  description: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
  parent: CategoryDetailsFragment_parent | null;
--- a/src/fragments/types/CategoryTranslationFragment.ts
+++ b/src/fragments/types/CategoryTranslationFragment.ts
@ -14,7 +14,7 @@ export interface CategoryTranslationFragment_translation_language {
 export interface CategoryTranslationFragment_translation {
  __typename: "CategoryTranslation";
  id: string;
-  description: any;
+  description: any | null;
  language: CategoryTranslationFragment_translation_language;
  name: string;
  seoDescription: string | null;
@ -25,7 +25,7 @@ export interface CategoryTranslationFragment_category {
  __typename: "Category";
  id: string;
  name: string;
-  description: any;
+  description: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
 }
--- a/src/fragments/types/CollectionDetailsFragment.ts
+++ b/src/fragments/types/CollectionDetailsFragment.ts
@ -46,7 +46,7 @@ export interface CollectionDetailsFragment {
  privateMetadata: (CollectionDetailsFragment_privateMetadata | null)[];
  backgroundImage: CollectionDetailsFragment_backgroundImage | null;
  slug: string;
-  description: any;
+  description: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
 }
--- a/src/fragments/types/CollectionTranslationFragment.ts
+++ b/src/fragments/types/CollectionTranslationFragment.ts
@ -10,7 +10,7 @@ export interface CollectionTranslationFragment_collection {
  __typename: "Collection";
  id: string;
  name: string;
-  description: any;
+  description: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
 }
@ -23,7 +23,7 @@ export interface CollectionTranslationFragment_translation_language {
 export interface CollectionTranslationFragment_translation {
  __typename: "CollectionTranslation";
  id: string;
-  description: any;
+  description: any | null;
  language: CollectionTranslationFragment_translation_language;
  name: string;
  seoDescription: string | null;
--- a/src/fragments/types/PageDetailsFragment.ts
+++ b/src/fragments/types/PageDetailsFragment.ts
@ -109,7 +109,7 @@ export interface PageDetailsFragment {
  pageType: PageDetailsFragment_pageType;
  metadata: (PageDetailsFragment_metadata | null)[];
  privateMetadata: (PageDetailsFragment_privateMetadata | null)[];
-  content: any;
+  content: any | null;
  seoTitle: string | null;
  seoDescription: string | null;
  publicationDate: any | null;
--- a/src/fragments/types/PageTranslatableFragment.ts
+++ b/src/fragments/types/PageTranslatableFragment.ts
@ -17,7 +17,7 @@ export interface PageTranslatableFragment_translation_language {
 export interface PageTranslatableFragment_translation {
  __typename: "PageTranslation";
  id: string;
-  content: any;
+  content: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
  title: string;
@ -27,7 +27,7 @@ export interface PageTranslatableFragment_translation {
 export interface PageTranslatableFragment {
  __typename: "PageTranslatableContent";
  id: string;
-  content: any;
+  content: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
  title: string;
--- a/src/fragments/types/PageTranslationFragment.ts
+++ b/src/fragments/types/PageTranslationFragment.ts
@ -11,7 +11,7 @@ import { LanguageCodeEnum } from "./../../types/globalTypes";
 export interface PageTranslationFragment_page {
  __typename: "Page";
  id: string;
-  content: any;
+  content: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
  title: string;
@ -26,7 +26,7 @@ export interface PageTranslationFragment_translation_language {
 export interface PageTranslationFragment_translation {
  __typename: "PageTranslation";
  id: string;
-  content: any;
+  content: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
  title: string;
--- a/src/fragments/types/Product.ts
+++ b/src/fragments/types/Product.ts
@ -253,7 +253,7 @@ export interface Product {
  privateMetadata: (Product_privateMetadata | null)[];
  name: string;
  slug: string;
-  description: any;
+  description: any | null;
  seoTitle: string | null;
  seoDescription: string | null;
  rating: number | null;
--- a/src/fragments/types/ProductTranslationFragment.ts
+++ b/src/fragments/types/ProductTranslationFragment.ts
@ -12,7 +12,7 @@ export interface ProductTranslationFragment_product {
  __typename: "Product";
  id: string;
  name: string;
-  description: any;
+  description: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
 }
@ -26,7 +26,7 @@ export interface ProductTranslationFragment_translation_language {
 export interface ProductTranslationFragment_translation {
  __typename: "ProductTranslation";
  id: string;
-  description: any;
+  description: any | null;
  language: ProductTranslationFragment_translation_language;
  name: string;
  seoDescription: string | null;
--- a/src/fragments/types/ShippingMethodFragment.ts
+++ b/src/fragments/types/ShippingMethodFragment.ts
@ -2,15 +2,16 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.

-import { WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTypes";
+import { PostalCodeRuleInclusionTypeEnum, WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTypes";

 // ====================================================
 // GraphQL fragment: ShippingMethodFragment
 // ====================================================

-export interface ShippingMethodFragment_zipCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+export interface ShippingMethodFragment_postalCodeRules {
+  __typename: "ShippingMethodPostalCodeRule";
  id: string;
+  inclusionType: PostalCodeRuleInclusionTypeEnum | null;
  start: string | null;
  end: string | null;
 }
@ -76,7 +77,7 @@ export interface ShippingMethodFragment_channelListings {
 export interface ShippingMethodFragment {
  __typename: "ShippingMethod";
  id: string;
-  zipCodeRules: (ShippingMethodFragment_zipCodeRules | null)[] | null;
+  postalCodeRules: (ShippingMethodFragment_postalCodeRules | null)[] | null;
  metadata: (ShippingMethodFragment_metadata | null)[];
  privateMetadata: (ShippingMethodFragment_privateMetadata | null)[];
  minimumOrderWeight: ShippingMethodFragment_minimumOrderWeight | null;
--- a/src/fragments/types/ShippingMethodWithExcludedProductsFragment.ts
+++ b/src/fragments/types/ShippingMethodWithExcludedProductsFragment.ts
@ -2,15 +2,16 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.

-import { WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTypes";
+import { PostalCodeRuleInclusionTypeEnum, WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTypes";

 // ====================================================
 // GraphQL fragment: ShippingMethodWithExcludedProductsFragment
 // ====================================================

-export interface ShippingMethodWithExcludedProductsFragment_zipCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+export interface ShippingMethodWithExcludedProductsFragment_postalCodeRules {
+  __typename: "ShippingMethodPostalCodeRule";
  id: string;
+  inclusionType: PostalCodeRuleInclusionTypeEnum | null;
  start: string | null;
  end: string | null;
 }
@ -107,7 +108,7 @@ export interface ShippingMethodWithExcludedProductsFragment_excludedProducts {
 export interface ShippingMethodWithExcludedProductsFragment {
  __typename: "ShippingMethod";
  id: string;
-  zipCodeRules: (ShippingMethodWithExcludedProductsFragment_zipCodeRules | null)[] | null;
+  postalCodeRules: (ShippingMethodWithExcludedProductsFragment_postalCodeRules | null)[] | null;
  metadata: (ShippingMethodWithExcludedProductsFragment_metadata | null)[];
  privateMetadata: (ShippingMethodWithExcludedProductsFragment_privateMetadata | null)[];
  minimumOrderWeight: ShippingMethodWithExcludedProductsFragment_minimumOrderWeight | null;
--- a/src/fragments/types/ShippingMethodWithPostalCodesFragment.ts
+++ b/src/fragments/types/ShippingMethodWithPostalCodesFragment.ts
@ -0,0 +1,23 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { PostalCodeRuleInclusionTypeEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL fragment: ShippingMethodWithPostalCodesFragment
+// ====================================================
+
+export interface ShippingMethodWithPostalCodesFragment_postalCodeRules {
+  __typename: "ShippingMethodPostalCodeRule";
+  id: string;
+  inclusionType: PostalCodeRuleInclusionTypeEnum | null;
+  start: string | null;
+  end: string | null;
+}
+
+export interface ShippingMethodWithPostalCodesFragment {
+  __typename: "ShippingMethod";
+  id: string;
+  postalCodeRules: (ShippingMethodWithPostalCodesFragment_postalCodeRules | null)[] | null;
+}
--- a/src/fragments/types/ShippingMethodWithZipCodesFragment.ts
+++ b/src/fragments/types/ShippingMethodWithZipCodesFragment.ts
@ -2,13 +2,16 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.

+import { PostalCodeRuleInclusionTypeEnum } from "./../../types/globalTypes";
+
 // ====================================================
 // GraphQL fragment: ShippingMethodWithZipCodesFragment
 // ====================================================

-export interface ShippingMethodWithZipCodesFragment_zipCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+export interface ShippingMethodWithZipCodesFragment_postalCodeRules {
+  __typename: "ShippingMethodPostalCodeRule";
  id: string;
+  inclusionType: PostalCodeRuleInclusionTypeEnum | null;
  start: string | null;
  end: string | null;
 }
@ -16,5 +19,5 @@ export interface ShippingMethodWithZipCodesFragment_zipCodeRules {
 export interface ShippingMethodWithZipCodesFragment {
  __typename: "ShippingMethod";
  id: string;
-  zipCodeRules: (ShippingMethodWithZipCodesFragment_zipCodeRules | null)[] | null;
+  postalCodeRules: (ShippingMethodWithZipCodesFragment_postalCodeRules | null)[] | null;
 }
--- a/src/fragments/types/ShippingZoneDetailsFragment.ts
+++ b/src/fragments/types/ShippingZoneDetailsFragment.ts
@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.

-import { WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTypes";
+import { PostalCodeRuleInclusionTypeEnum, WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTypes";

 // ====================================================
 // GraphQL fragment: ShippingZoneDetailsFragment
@ -26,9 +26,10 @@ export interface ShippingZoneDetailsFragment_countries {
  country: string;
 }

-export interface ShippingZoneDetailsFragment_shippingMethods_zipCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+export interface ShippingZoneDetailsFragment_shippingMethods_postalCodeRules {
+  __typename: "ShippingMethodPostalCodeRule";
  id: string;
+  inclusionType: PostalCodeRuleInclusionTypeEnum | null;
  start: string | null;
  end: string | null;
 }
@ -94,7 +95,7 @@ export interface ShippingZoneDetailsFragment_shippingMethods_channelListings {
 export interface ShippingZoneDetailsFragment_shippingMethods {
  __typename: "ShippingMethod";
  id: string;
-  zipCodeRules: (ShippingZoneDetailsFragment_shippingMethods_zipCodeRules | null)[] | null;
+  postalCodeRules: (ShippingZoneDetailsFragment_shippingMethods_postalCodeRules | null)[] | null;
  metadata: (ShippingZoneDetailsFragment_shippingMethods_metadata | null)[];
  privateMetadata: (ShippingZoneDetailsFragment_shippingMethods_privateMetadata | null)[];
  minimumOrderWeight: ShippingZoneDetailsFragment_shippingMethods_minimumOrderWeight | null;
--- a/src/index.tsx
+++ b/src/index.tsx
@ -167,8 +167,8 @@ const Routes: React.FC = () => {

              dispatchAppState({
                payload: {
-                  errorId,
-                  error: "unhandled"
+                  error: "unhandled",
+                  errorId
                },
                type: "displayError"
              });
--- a/src/pages/components/PageDetailsPage/form.tsx
+++ b/src/pages/components/PageDetailsPage/form.tsx
@ -122,7 +122,7 @@ function usePageForm(
    title: page?.title || ""
  });
  const [content, changeContent] = useRichText({
-    initial: pageExists ? page?.content : null,
+    initial: page?.content,
    triggerChange
  });

--- a/src/pages/types/PageCreate.ts
+++ b/src/pages/types/PageCreate.ts
@ -117,7 +117,7 @@ export interface PageCreate_pageCreate_page {
  pageType: PageCreate_pageCreate_page_pageType;
  metadata: (PageCreate_pageCreate_page_metadata | null)[];
  privateMetadata: (PageCreate_pageCreate_page_privateMetadata | null)[];
-  content: any;
+  content: any | null;
  seoTitle: string | null;
  seoDescription: string | null;
  publicationDate: any | null;
--- a/src/pages/types/PageDetails.ts
+++ b/src/pages/types/PageDetails.ts
@ -109,7 +109,7 @@ export interface PageDetails_page {
  pageType: PageDetails_page_pageType;
  metadata: (PageDetails_page_metadata | null)[];
  privateMetadata: (PageDetails_page_privateMetadata | null)[];
-  content: any;
+  content: any | null;
  seoTitle: string | null;
  seoDescription: string | null;
  publicationDate: any | null;
--- a/src/pages/types/PageUpdate.ts
+++ b/src/pages/types/PageUpdate.ts
@ -116,7 +116,7 @@ export interface PageUpdate_pageUpdate_page {
  pageType: PageUpdate_pageUpdate_page_pageType;
  metadata: (PageUpdate_pageUpdate_page_metadata | null)[];
  privateMetadata: (PageUpdate_pageUpdate_page_privateMetadata | null)[];
-  content: any;
+  content: any | null;
  seoTitle: string | null;
  seoDescription: string | null;
  publicationDate: any | null;
--- a/src/pages/views/PageCreate.tsx
+++ b/src/pages/views/PageCreate.tsx
@ -12,6 +12,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import usePageSearch from "@saleor/searches/usePageSearch";
 import usePageTypeSearch from "@saleor/searches/usePageTypeSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
+import { getParsedDataForJsonStringField } from "@saleor/translations/utils";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
 import {
  useMetadataUpdate,
@ -128,7 +129,7 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
                  attributes: formData.attributes,
                  updatedFileAttributes
                }),
-                content: JSON.stringify(formData.content),
+                content: getParsedDataForJsonStringField(formData.content),
                isPublished: formData.isPublished,
                pageType: formData.pageType,
                publicationDate: formData.publicationDate,
--- a/src/pages/views/PageDetails.tsx
+++ b/src/pages/views/PageDetails.tsx
@ -23,6 +23,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
 import usePageSearch from "@saleor/searches/usePageSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
+import { getParsedDataForJsonStringField } from "@saleor/translations/utils";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
 import {
  useMetadataUpdate,
@ -53,7 +54,7 @@ const createPageInput = (
    attributes: data.attributes,
    updatedFileAttributes
  }),
-  content: JSON.stringify(data.content),
+  content: getParsedDataForJsonStringField(data.content),
  isPublished: data.isPublished,
  publicationDate: data.publicationDate,
  seo: {
--- a/src/products/components/ProductUpdatePage/form.tsx
+++ b/src/products/components/ProductUpdatePage/form.tsx
@ -220,7 +220,7 @@ function useProductUpdateForm(
    triggerChange();
  };
  const handleCollectionSelect = createMultiAutocompleteSelectHandler(
-    form.toggleValue,
+    event => form.toggleValue(event, triggerChange),
    opts.setSelectedCollections,
    opts.selectedCollections,
    opts.collections
--- a/src/products/types/ProductChannelListingUpdate.ts
+++ b/src/products/types/ProductChannelListingUpdate.ts
@ -253,7 +253,7 @@ export interface ProductChannelListingUpdate_productChannelListingUpdate_product
  privateMetadata: (ProductChannelListingUpdate_productChannelListingUpdate_product_privateMetadata | null)[];
  name: string;
  slug: string;
-  description: any;
+  description: any | null;
  seoTitle: string | null;
  seoDescription: string | null;
  rating: number | null;
--- a/src/products/types/ProductCreate.ts
+++ b/src/products/types/ProductCreate.ts
@ -260,7 +260,7 @@ export interface ProductCreate_productCreate_product {
  privateMetadata: (ProductCreate_productCreate_product_privateMetadata | null)[];
  name: string;
  slug: string;
-  description: any;
+  description: any | null;
  seoTitle: string | null;
  seoDescription: string | null;
  rating: number | null;
--- a/src/products/types/ProductDetails.ts
+++ b/src/products/types/ProductDetails.ts
@ -253,7 +253,7 @@ export interface ProductDetails_product {
  privateMetadata: (ProductDetails_product_privateMetadata | null)[];
  name: string;
  slug: string;
-  description: any;
+  description: any | null;
  seoTitle: string | null;
  seoDescription: string | null;
  rating: number | null;
--- a/src/products/types/ProductImageCreate.ts
+++ b/src/products/types/ProductImageCreate.ts
@ -259,7 +259,7 @@ export interface ProductImageCreate_productImageCreate_product {
  privateMetadata: (ProductImageCreate_productImageCreate_product_privateMetadata | null)[];
  name: string;
  slug: string;
-  description: any;
+  description: any | null;
  seoTitle: string | null;
  seoDescription: string | null;
  rating: number | null;
--- a/src/products/types/ProductImageUpdate.ts
+++ b/src/products/types/ProductImageUpdate.ts
@ -259,7 +259,7 @@ export interface ProductImageUpdate_productImageUpdate_product {
  privateMetadata: (ProductImageUpdate_productImageUpdate_product_privateMetadata | null)[];
  name: string;
  slug: string;
-  description: any;
+  description: any | null;
  seoTitle: string | null;
  seoDescription: string | null;
  rating: number | null;
--- a/src/products/types/ProductUpdate.ts
+++ b/src/products/types/ProductUpdate.ts
@ -260,7 +260,7 @@ export interface ProductUpdate_productUpdate_product {
  privateMetadata: (ProductUpdate_productUpdate_product_privateMetadata | null)[];
  name: string;
  slug: string;
-  description: any;
+  description: any | null;
  seoTitle: string | null;
  seoDescription: string | null;
  rating: number | null;
--- a/src/products/types/ProductVariantReorder.ts
+++ b/src/products/types/ProductVariantReorder.ts
@ -259,7 +259,7 @@ export interface ProductVariantReorder_productVariantReorder_product {
  privateMetadata: (ProductVariantReorder_productVariantReorder_product_privateMetadata | null)[];
  name: string;
  slug: string;
-  description: any;
+  description: any | null;
  seoTitle: string | null;
  seoDescription: string | null;
  rating: number | null;
--- a/src/products/types/ProductVariantSetDefault.ts
+++ b/src/products/types/ProductVariantSetDefault.ts
@ -259,7 +259,7 @@ export interface ProductVariantSetDefault_productVariantSetDefault_product {
  privateMetadata: (ProductVariantSetDefault_productVariantSetDefault_product_privateMetadata | null)[];
  name: string;
  slug: string;
-  description: any;
+  description: any | null;
  seoTitle: string | null;
  seoDescription: string | null;
  rating: number | null;
--- a/src/products/types/SimpleProductUpdate.ts
+++ b/src/products/types/SimpleProductUpdate.ts
@ -260,7 +260,7 @@ export interface SimpleProductUpdate_productUpdate_product {
  privateMetadata: (SimpleProductUpdate_productUpdate_product_privateMetadata | null)[];
  name: string;
  slug: string;
-  description: any;
+  description: any | null;
  seoTitle: string | null;
  seoDescription: string | null;
  rating: number | null;
--- a/src/products/views/ProductCreate/handlers.ts
+++ b/src/products/views/ProductCreate/handlers.ts
@ -37,6 +37,7 @@ import {
 } from "@saleor/products/types/VariantCreate";
 import { getAvailabilityVariables } from "@saleor/products/utils/handlers";
 import { SearchProductTypes_search_edges_node } from "@saleor/searches/types/SearchProductTypes";
+import { getParsedDataForJsonStringField } from "@saleor/translations/utils";
 import { MutationFetchResult } from "react-apollo";

 const getChannelsVariables = (productId: string, channels: ChannelData[]) => ({
@ -108,7 +109,7 @@ export function createHandler(
        category: formData.category,
        chargeTaxes: formData.chargeTaxes,
        collections: formData.collections,
-        description: JSON.stringify(formData.description),
+        description: getParsedDataForJsonStringField(formData.description),
        name: formData.name,
        productType: formData.productType?.id,
        rating: formData.rating,
--- a/src/products/views/ProductUpdate/handlers.ts
+++ b/src/products/views/ProductUpdate/handlers.ts
@ -56,6 +56,7 @@ import {
 } from "@saleor/products/types/VariantCreate";
 import { mapFormsetStockToStockInput } from "@saleor/products/utils/data";
 import { getAvailabilityVariables } from "@saleor/products/utils/handlers";
+import { getParsedDataForJsonStringField } from "@saleor/translations/utils";
 import { ReorderEvent } from "@saleor/types";
 import { move } from "@saleor/utils/lists";
 import { diff } from "fast-array-diff";
@ -185,7 +186,7 @@ export function createUpdateHandler(
        category: data.category,
        chargeTaxes: data.chargeTaxes,
        collections: data.collections,
-        description: JSON.stringify(data.description),
+        description: getParsedDataForJsonStringField(data.description),
        name: data.name,
        rating: data.rating,
        seo: {
--- a/src/shipping/components/ShippingRateZipCodeRangeRemoveDialog/ShippingRateZipCodeRangeRemoveDialog.tsx
+++ b/src/shipping/components/ShippingRateZipCodeRangeRemoveDialog/ShippingRateZipCodeRangeRemoveDialog.tsx
@ -1,42 +0,0 @@
-import DialogContentText from "@material-ui/core/DialogContentText";
-import ActionDialog from "@saleor/components/ActionDialog";
-import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
-import { DialogProps } from "@saleor/types";
-import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
-
-export interface ShippingRateZipCodeRangeRemoveDialogProps extends DialogProps {
-  confirmButtonState: ConfirmButtonTransitionState;
-  onConfirm: () => void;
-}
-
-const ShippingRateZipCodeRangeRemoveDialog: React.FC<ShippingRateZipCodeRangeRemoveDialogProps> = ({
-  confirmButtonState,
-  open,
-  onClose,
-  onConfirm
-}) => {
-  const intl = useIntl();
-
-  return (
-    <ActionDialog
-      confirmButtonState={confirmButtonState}
-      open={open}
-      onClose={onClose}
-      onConfirm={onConfirm}
-      title={intl.formatMessage({
-        defaultMessage: "Remove postal codes from Shipping Rate",
-        description: "header"
-      })}
-      variant="delete"
-    >
-      <DialogContentText>
-        <FormattedMessage defaultMessage="Are you sure you want to remove this postal code rule?" />
-      </DialogContentText>
-    </ActionDialog>
-  );
-};
-
-ShippingRateZipCodeRangeRemoveDialog.displayName =
-  "ShippingRateZipCodeRangeRemoveDialog";
-export default ShippingRateZipCodeRangeRemoveDialog;
--- a/src/shipping/components/ShippingRateZipCodeRangeRemoveDialog/index.ts
+++ b/src/shipping/components/ShippingRateZipCodeRangeRemoveDialog/index.ts
@ -1,2 +0,0 @@
-export * from "./ShippingRateZipCodeRangeRemoveDialog";
-export { default } from "./ShippingRateZipCodeRangeRemoveDialog";
--- a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.stories.tsx
+++ b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.stories.tsx
@ -2,12 +2,12 @@ import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";

-import ShippingZoneZipCodeRangeDialog from "./ShippingZoneZipCodeRangeDialog";
+import ShippingZonePostalCodeRangeDialog from "./ShippingZonePostalCodeRangeDialog";

 storiesOf("Shipping / Add postal code range", module)
  .addDecorator(Decorator)
  .add("default", () => (
-    <ShippingZoneZipCodeRangeDialog
+    <ShippingZonePostalCodeRangeDialog
      confirmButtonState="default"
      open={true}
      onClose={() => undefined}
--- a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
+++ b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
@ -16,7 +16,7 @@ import { DialogProps, MinMax } from "@saleor/types";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

-export interface ShippingZoneZipCodeRangeDialogProps extends DialogProps {
+export interface ShippingZonePostalCodeRangeDialogProps extends DialogProps {
  confirmButtonState: ConfirmButtonTransitionState;
  onSubmit: (range: MinMax) => void;
 }
@ -28,11 +28,11 @@ const useStyles = makeStyles(
    }
  }),
  {
-    name: "ShippingZoneZipCodeRangeDialog"
+    name: "ShippingZonePostalCodeRangeDialog"
  }
 );

-const ShippingZoneZipCodeRangeDialog: React.FC<ShippingZoneZipCodeRangeDialogProps> = ({
+const ShippingZonePostalCodeRangeDialog: React.FC<ShippingZonePostalCodeRangeDialogProps> = ({
  confirmButtonState,
  open,
  onClose,
@ -105,5 +105,6 @@ const ShippingZoneZipCodeRangeDialog: React.FC<ShippingZoneZipCodeRangeDialogPro
  );
 };

-ShippingZoneZipCodeRangeDialog.displayName = "ShippingZoneZipCodeRangeDialog";
-export default ShippingZoneZipCodeRangeDialog;
+ShippingZonePostalCodeRangeDialog.displayName =
+  "ShippingZonePostalCodeRangeDialog";
+export default ShippingZonePostalCodeRangeDialog;
--- a/src/shipping/components/ShippingZonePostalCodeRangeDialog/index.ts
+++ b/src/shipping/components/ShippingZonePostalCodeRangeDialog/index.ts
@ -0,0 +1,2 @@
+export * from "./ShippingZonePostalCodeRangeDialog";
+export { default } from "./ShippingZonePostalCodeRangeDialog";
--- a/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx
+++ b/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx
@ -13,27 +13,24 @@ import CardTitle from "@saleor/components/CardTitle";
 import RadioGroupField from "@saleor/components/RadioGroupField";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
-import { ShippingMethodFragment_zipCodeRules } from "@saleor/fragments/types/ShippingMethodFragment";
-import { FormChange } from "@saleor/hooks/useForm";
+import { ShippingMethodFragment_postalCodeRules } from "@saleor/fragments/types/ShippingMethodFragment";
 import ArrowDropdown from "@saleor/icons/ArrowDropdown";
 import { renderCollection } from "@saleor/misc";
+import { PostalCodeRuleInclusionTypeEnum } from "@saleor/types/globalTypes";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

-export enum ZipCodeInclusion {
-  Include,
-  Exclude
-}
-
-export interface ShippingZoneZipCodesProps {
-  data: Record<"includeZipCodes", ZipCodeInclusion>;
+export interface ShippingZonePostalCodesProps {
  disabled: boolean;
  initialExpanded?: boolean;
-  zipCodes: ShippingMethodFragment_zipCodeRules[] | undefined;
-  onZipCodeInclusionChange: FormChange;
-  onZipCodeDelete: (id: string) => void;
-  onZipCodeRangeAdd: () => void;
+  initialInclusionType?: PostalCodeRuleInclusionTypeEnum;
+  postalCodes: ShippingMethodFragment_postalCodeRules[] | undefined;
+  onPostalCodeInclusionChange: (
+    inclusion: PostalCodeRuleInclusionTypeEnum
+  ) => void;
+  onPostalCodeDelete: (code: ShippingMethodFragment_postalCodeRules) => void;
+  onPostalCodeRangeAdd: () => void;
 }

 const useStyles = makeStyles(
@ -60,23 +57,45 @@ const useStyles = makeStyles(
    }
  }),
  {
-    name: "ShippingZoneZipCodes"
+    name: "ShippingZonePostalCodes"
  }
 );

-const ShippingZoneZipCodes: React.FC<ShippingZoneZipCodesProps> = ({
-  data,
+const ShippingZonePostalCodes: React.FC<ShippingZonePostalCodesProps> = ({
  disabled,
-  initialExpanded,
-  zipCodes,
-  onZipCodeDelete,
-  onZipCodeInclusionChange,
-  onZipCodeRangeAdd
+  initialExpanded = true,
+  initialInclusionType = PostalCodeRuleInclusionTypeEnum.EXCLUDE,
+  postalCodes,
+  onPostalCodeDelete,
+  onPostalCodeInclusionChange,
+  onPostalCodeRangeAdd
 }) => {
  const [expanded, setExpanded] = React.useState(initialExpanded);
+  const [inclusionType, setInclusionType] = React.useState(null);
  const intl = useIntl();
  const classes = useStyles({});

+  const onInclusionRadioChange = (event: React.ChangeEvent<any>) => {
+    const value = event.target.value;
+    setInclusionType(value);
+    onPostalCodeInclusionChange(value);
+  };
+
+  const getPostalCodeRangeLabel = (
+    postalCodeRange: ShippingMethodFragment_postalCodeRules
+  ) => {
+    if (!postalCodeRange?.start) {
+      return <Skeleton />;
+    }
+    if (postalCodeRange?.end) {
+      return `${postalCodeRange.start} - ${postalCodeRange.end}`;
+    }
+    return postalCodeRange.start;
+  };
+
+  const getInlcusionType = () =>
+    inclusionType === null ? initialInclusionType : inclusionType;
+
  return (
    <Card>
      <CardTitle
@ -87,8 +106,8 @@ const ShippingZoneZipCodes: React.FC<ShippingZoneZipCodesProps> = ({
        toolbar={
          <Button
            color="primary"
-            onClick={onZipCodeRangeAdd}
-            data-test="add-zip-code-range"
+            onClick={onPostalCodeRangeAdd}
+            data-test="add-postal-code-range"
          >
            <FormattedMessage
              defaultMessage="Add postal code range"
@ -115,13 +134,12 @@ const ShippingZoneZipCodes: React.FC<ShippingZoneZipCodesProps> = ({
                  </Typography>
                </div>
              ),
-              value: ZipCodeInclusion.Exclude
+              value: PostalCodeRuleInclusionTypeEnum.EXCLUDE
            },
            {
-              disabled: true,
              label: (
                <div className={classes.option}>
-                  <Typography color="textSecondary" variant="body1">
+                  <Typography variant="body1">
                    <FormattedMessage
                      defaultMessage="Include postal codes"
                      description="action"
@ -132,12 +150,12 @@ const ShippingZoneZipCodes: React.FC<ShippingZoneZipCodesProps> = ({
                  </Typography>
                </div>
              ),
-              value: ZipCodeInclusion.Include
+              value: PostalCodeRuleInclusionTypeEnum.INCLUDE
            }
          ]}
-          name="includeZipCodes"
-          value={data.includeZipCodes}
-          onChange={onZipCodeInclusionChange}
+          name="includePostalCodes"
+          value={getInlcusionType()}
+          onChange={onInclusionRadioChange}
        />
      </CardContent>
      <ResponsiveTable>
@ -145,61 +163,50 @@ const ShippingZoneZipCodes: React.FC<ShippingZoneZipCodesProps> = ({
          <col />
          <col className={classes.colAction} />
        </colgroup>
-        {zipCodes === undefined ||
-          (zipCodes.length > 0 && (
-            <TableHead>
-              <TableRow>
-                <TableCell>
-                  {zipCodes === undefined ? (
-                    <Skeleton className={classes.skeleton} />
-                  ) : (
-                    <Typography variant="caption">
-                      <FormattedMessage
-                        defaultMessage="{number} postal code ranges"
-                        description="number of postal code ranges"
-                        values={{
-                          number: zipCodes.length
-                        }}
-                      />
-                    </Typography>
-                  )}
-                </TableCell>
-                <TableCell>
-                  <IconButton onClick={() => setExpanded(!expanded)}>
-                    <ArrowDropdown
-                      className={classNames(classes.arrow, {
-                        [classes.arrowRotate]: expanded
-                      })}
-                    />
-                  </IconButton>
-                </TableCell>
-              </TableRow>
-            </TableHead>
-          ))}
+        <TableHead>
+          <TableRow>
+            <TableCell>
+              {postalCodes === undefined ? (
+                <Skeleton className={classes.skeleton} />
+              ) : (
+                <Typography variant="caption">
+                  <FormattedMessage
+                    defaultMessage="{number} postal code ranges"
+                    description="number of postal code ranges"
+                    values={{
+                      number: postalCodes.length
+                    }}
+                  />
+                </Typography>
+              )}
+            </TableCell>
+            <TableCell>
+              <IconButton onClick={() => setExpanded(!expanded)}>
+                <ArrowDropdown
+                  className={classNames(classes.arrow, {
+                    [classes.arrowRotate]: expanded
+                  })}
+                />
+              </IconButton>
+            </TableCell>
+          </TableRow>
+        </TableHead>
        {expanded && (
          <TableBody>
            {renderCollection(
-              zipCodes,
-              zipCodeRange => (
-                <TableRow key={zipCodeRange?.id}>
+              postalCodes,
+              postalCodeRange => (
+                <TableRow key={postalCodeRange?.id}>
                  <TableCell>
-                    {zipCodeRange?.start ? (
-                      zipCodeRange?.end ? (
-                        `${zipCodeRange.start} - ${zipCodeRange.end}`
-                      ) : (
-                        zipCodeRange.start
-                      )
-                    ) : (
-                      <Skeleton />
-                    )}
+                    {getPostalCodeRangeLabel(postalCodeRange)}
                  </TableCell>
                  <TableCell>
                    <IconButton
                      disabled={disabled}
                      color="primary"
-                      onClick={() => onZipCodeDelete(zipCodeRange.id)}
-                      data-test="delete-zip-code"
-                      data-test-id={zipCodeRange?.id}
+                      onClick={() => onPostalCodeDelete(postalCodeRange)}
+                      data-test="delete-postal-code"
+                      data-test-id={postalCodeRange?.id}
                    >
                      <DeleteIcon />
                    </IconButton>
@ -223,8 +230,5 @@ const ShippingZoneZipCodes: React.FC<ShippingZoneZipCodesProps> = ({
  );
 };

-ShippingZoneZipCodes.displayName = "ShippingZoneZipCodes";
-ShippingZoneZipCodes.defaultProps = {
-  initialExpanded: true
-};
-export default ShippingZoneZipCodes;
+ShippingZonePostalCodes.displayName = "ShippingZonePostalCodes";
+export default ShippingZonePostalCodes;
--- a/src/shipping/components/ShippingZonePostalCodes/index.ts
+++ b/src/shipping/components/ShippingZonePostalCodes/index.ts
@ -0,0 +1,2 @@
+export * from "./ShippingZonePostalCodes";
+export { default } from "./ShippingZonePostalCodes";
--- a/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.stories.tsx
+++ b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.stories.tsx
@ -1,5 +1,8 @@
 import Decorator from "@saleor/storybook//Decorator";
-import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
+import {
+  PostalCodeRuleInclusionTypeEnum,
+  ShippingMethodTypeEnum
+} from "@saleor/types/globalTypes";
 import { storiesOf } from "@storybook/react";
 import React from "react";

@ -45,27 +48,30 @@ const props: ShippingZoneRatesCreatePageProps = {
  onBack: () => undefined,
  onChannelsChange: () => undefined,
  onDelete: () => undefined,
+  onPostalCodeAssign: () => undefined,
+  onPostalCodeInclusionChange: () => undefined,
+  onPostalCodeUnassign: () => undefined,
  onSubmit: () => undefined,
-  onZipCodeAssign: () => undefined,
-  onZipCodeUnassign: () => undefined,
  openChannelsModal: () => undefined,
-  saveButtonBarState: "default",
-  shippingChannels: defaultChannels,
-  variant: ShippingMethodTypeEnum.PRICE,
-  zipCodes: [
+  postalCodes: [
    {
-      __typename: "ShippingMethodZipCodeRule",
+      __typename: "ShippingMethodPostalCodeRule",
      end: "51-200",
      id: "1",
+      inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
      start: "51-220"
    },
    {
-      __typename: "ShippingMethodZipCodeRule",
+      __typename: "ShippingMethodPostalCodeRule",
      end: "31-101",
      id: "1",
+      inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
      start: "44-205"
    }
-  ]
+  ],
+  saveButtonBarState: "default",
+  shippingChannels: defaultChannels,
+  variant: ShippingMethodTypeEnum.PRICE
 };

 storiesOf("Shipping / ShippingZoneRatesCreatePage page", module)
--- a/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx
+++ b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx
@ -10,24 +10,24 @@ import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { ShippingChannelsErrorFragment } from "@saleor/fragments/types/ShippingChannelsErrorFragment";
 import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment";
-import { ShippingMethodFragment_zipCodeRules } from "@saleor/fragments/types/ShippingMethodFragment";
+import { ShippingMethodFragment_postalCodeRules } from "@saleor/fragments/types/ShippingMethodFragment";
 import { validatePrice } from "@saleor/products/utils/validation";
 import OrderValue from "@saleor/shipping/components/OrderValue";
 import OrderWeight from "@saleor/shipping/components/OrderWeight";
 import PricingCard from "@saleor/shipping/components/PricingCard";
 import ShippingRateInfo from "@saleor/shipping/components/ShippingRateInfo";
 import { createChannelsChangeHandler } from "@saleor/shipping/handlers";
-import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
+import {
+  PostalCodeRuleInclusionTypeEnum,
+  ShippingMethodTypeEnum
+} from "@saleor/types/globalTypes";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

-import ShippingZoneZipCodes, {
-  ZipCodeInclusion
-} from "../ShippingZoneZipCodes";
+import ShippingZonePostalCodes from "../ShippingZonePostalCodes";

 export interface FormData {
  channelListings: ChannelShippingData[];
-  includeZipCodes: ZipCodeInclusion;
  name: string;
  noLimits: boolean;
  minValue: string;
@ -42,15 +42,18 @@ export interface ShippingZoneRatesCreatePageProps {
  shippingChannels: ChannelShippingData[];
  disabled: boolean;
  hasChannelChanged?: boolean;
-  zipCodes?: ShippingMethodFragment_zipCodeRules[];
+  postalCodes?: ShippingMethodFragment_postalCodeRules[];
  channelErrors: ShippingChannelsErrorFragment[];
  errors: ShippingErrorFragment[];
  saveButtonBarState: ConfirmButtonTransitionState;
  onBack: () => void;
  onDelete?: () => void;
  onSubmit: (data: FormData) => void;
-  onZipCodeAssign: () => void;
-  onZipCodeUnassign: (id: string) => void;
+  onPostalCodeInclusionChange: (
+    inclusion: PostalCodeRuleInclusionTypeEnum
+  ) => void;
+  onPostalCodeAssign: () => void;
+  onPostalCodeUnassign: (code: any) => void;
  onChannelsChange: (data: ChannelShippingData[]) => void;
  openChannelsModal: () => void;
  variant: ShippingMethodTypeEnum;
@ -66,19 +69,19 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
  onBack,
  onDelete,
  onSubmit,
+  onPostalCodeInclusionChange,
  onChannelsChange,
-  onZipCodeAssign,
-  onZipCodeUnassign,
+  onPostalCodeAssign,
+  onPostalCodeUnassign,
  openChannelsModal,
  saveButtonBarState,
  variant,
-  zipCodes
+  postalCodes
 }) => {
  const intl = useIntl();
  const isPriceVariant = variant === ShippingMethodTypeEnum.PRICE;
  const initialForm: FormData = {
    channelListings: shippingChannels,
-    includeZipCodes: ZipCodeInclusion.Include,
    maxDays: "",
    maxValue: "",
    minDays: "",
@ -88,6 +91,12 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
    type: null
  };

+  const postalCodeInclusionChange = (
+    inclusion: PostalCodeRuleInclusionTypeEnum
+  ) => {
+    onPostalCodeInclusionChange(inclusion);
+  };
+
  return (
    <Form initial={initialForm} onSubmit={onSubmit}>
      {({ change, data, hasChanged, submit, triggerChange }) => {
@ -154,13 +163,12 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
                  errors={channelErrors}
                />
                <CardSpacer />
-                <ShippingZoneZipCodes
-                  data={data}
+                <ShippingZonePostalCodes
                  disabled={disabled}
-                  onZipCodeDelete={onZipCodeUnassign}
-                  onZipCodeInclusionChange={() => undefined}
-                  onZipCodeRangeAdd={onZipCodeAssign}
-                  zipCodes={zipCodes}
+                  onPostalCodeDelete={onPostalCodeUnassign}
+                  onPostalCodeInclusionChange={postalCodeInclusionChange}
+                  onPostalCodeRangeAdd={onPostalCodeAssign}
+                  postalCodes={postalCodes}
                />
              </div>
              <div>
--- a/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.stories.tsx
+++ b/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.stories.tsx
@ -48,12 +48,13 @@ const props: ShippingZoneRatesPageProps = {
  onChannelsChange: () => undefined,
  onDelete: () => undefined,
  onNextPage: () => undefined,
+  onPostalCodeAssign: () => undefined,
+  onPostalCodeInclusionChange: () => undefined,
+  onPostalCodeUnassign: () => undefined,
  onPreviousPage: () => undefined,
  onProductAssign: () => undefined,
  onProductUnassign: () => undefined,
  onSubmit: () => undefined,
-  onZipCodeAssign: () => undefined,
-  onZipCodeUnassign: () => undefined,
  openChannelsModal: () => undefined,
  rate: shippingZone.shippingMethods[0],
  saveButtonBarState: "default",
--- a/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx
+++ b/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx
@ -12,6 +12,7 @@ import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { ShippingChannelsErrorFragment } from "@saleor/fragments/types/ShippingChannelsErrorFragment";
 import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment";
+import { ShippingMethodFragment_postalCodeRules } from "@saleor/fragments/types/ShippingMethodFragment";
 import { validatePrice } from "@saleor/products/utils/validation";
 import OrderValue from "@saleor/shipping/components/OrderValue";
 import OrderWeight from "@saleor/shipping/components/OrderWeight";
@ -21,19 +22,19 @@ import ShippingRateInfo from "@saleor/shipping/components/ShippingRateInfo";
 import { createChannelsChangeHandler } from "@saleor/shipping/handlers";
 import { ShippingZone_shippingZone_shippingMethods } from "@saleor/shipping/types/ShippingZone";
 import { ListActions, ListProps } from "@saleor/types";
-import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
+import {
+  PostalCodeRuleInclusionTypeEnum,
+  ShippingMethodTypeEnum
+} from "@saleor/types/globalTypes";
 import { mapMetadataItemToInput } from "@saleor/utils/maps";
 import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { FormattedMessage } from "react-intl";

-import ShippingZoneZipCodes, {
-  ZipCodeInclusion
-} from "../ShippingZoneZipCodes";
+import ShippingZonePostalCodes from "../ShippingZonePostalCodes";

 export interface FormData extends MetadataFormData {
  channelListings: ChannelShippingData[];
-  includeZipCodes: ZipCodeInclusion;
  name: string;
  noLimits: boolean;
  minValue: string;
@ -50,6 +51,7 @@ export interface ShippingZoneRatesPageProps
  shippingChannels: ChannelShippingData[];
  disabled: boolean;
  hasChannelChanged?: boolean;
+  havePostalCodesChanged?: boolean;
  rate: ShippingZone_shippingZone_shippingMethods;
  channelErrors: ShippingChannelsErrorFragment[];
  errors: ShippingErrorFragment[];
@ -57,8 +59,11 @@ export interface ShippingZoneRatesPageProps
  onBack: () => void;
  onDelete?: () => void;
  onSubmit: (data: FormData) => void;
-  onZipCodeAssign: () => void;
-  onZipCodeUnassign: (id: string) => void;
+  onPostalCodeInclusionChange: (
+    inclusion: PostalCodeRuleInclusionTypeEnum
+  ) => void;
+  onPostalCodeAssign: () => void;
+  onPostalCodeUnassign: (code: ShippingMethodFragment_postalCodeRules) => void;
  onChannelsChange: (data: ChannelShippingData[]) => void;
  openChannelsModal: () => void;
  onProductAssign: () => void;
@ -73,12 +78,14 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
  disabled,
  errors,
  hasChannelChanged,
+  havePostalCodesChanged,
  onBack,
  onDelete,
  onSubmit,
+  onPostalCodeInclusionChange,
  onChannelsChange,
-  onZipCodeAssign,
-  onZipCodeUnassign,
+  onPostalCodeAssign,
+  onPostalCodeUnassign,
  onProductAssign,
  onProductUnassign,
  openChannelsModal,
@ -90,7 +97,6 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
  const isPriceVariant = variant === ShippingMethodTypeEnum.PRICE;
  const initialForm: FormData = {
    channelListings: shippingChannels,
-    includeZipCodes: ZipCodeInclusion.Exclude,
    maxDays: rate?.maximumDeliveryDays?.toString() || "",
    maxValue: rate?.maximumOrderWeight?.value.toString() || "",
    metadata: rate?.metadata.map(mapMetadataItemToInput),
@ -102,6 +108,14 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
    type: rate?.type || null
  };

+  const postalCodesInclusionType = rate?.postalCodeRules[0]?.inclusionType;
+
+  const postalCodeInclusionChange = (
+    inclusion: PostalCodeRuleInclusionTypeEnum
+  ) => {
+    onPostalCodeInclusionChange(inclusion);
+  };
+
  const {
    makeChangeHandler: makeMetadataChangeHandler
  } = useMetadataChangeTrigger();
@ -119,6 +133,8 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
        );

        const changeMetadata = makeMetadataChangeHandler(change);
+        const formIsUnchanged =
+          !hasChanged && !hasChannelChanged && !havePostalCodesChanged;

        return (
          <Container>
@ -162,13 +178,13 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
                  errors={channelErrors}
                />
                <CardSpacer />
-                <ShippingZoneZipCodes
-                  data={data}
+                <ShippingZonePostalCodes
                  disabled={disabled}
-                  onZipCodeDelete={onZipCodeUnassign}
-                  onZipCodeInclusionChange={() => undefined}
-                  onZipCodeRangeAdd={onZipCodeAssign}
-                  zipCodes={rate?.zipCodeRules}
+                  onPostalCodeDelete={onPostalCodeUnassign}
+                  onPostalCodeInclusionChange={postalCodeInclusionChange}
+                  onPostalCodeRangeAdd={onPostalCodeAssign}
+                  postalCodes={rate?.postalCodeRules}
+                  initialInclusionType={postalCodesInclusionType}
                />
                <CardSpacer />
                <ShippingMethodProducts
@ -196,9 +212,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
              </div>
            </Grid>
            <SaveButtonBar
-              disabled={
-                disabled || formDisabled || (!hasChanged && !hasChannelChanged)
-              }
+              disabled={disabled || formDisabled || formIsUnchanged}
              onCancel={onBack}
              onDelete={onDelete}
              onSave={submit}
--- a/src/shipping/components/ShippingZoneZipCodeRangeDialog/index.ts
+++ b/src/shipping/components/ShippingZoneZipCodeRangeDialog/index.ts
@ -1,2 +0,0 @@
-export * from "./ShippingZoneZipCodeRangeDialog";
-export { default } from "./ShippingZoneZipCodeRangeDialog";
--- a/src/shipping/components/ShippingZoneZipCodes/index.ts
+++ b/src/shipping/components/ShippingZoneZipCodes/index.ts
@ -1,2 +0,0 @@
-export * from "./ShippingZoneZipCodes";
-export { default } from "./ShippingZoneZipCodes";
--- a/src/shipping/fixtures.ts
+++ b/src/shipping/fixtures.ts
@ -2,7 +2,11 @@ import { ShippingZoneFragment } from "@saleor/fragments/types/ShippingZoneFragme
 import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
 import { ShippingZone_shippingZone } from "@saleor/shipping/types/ShippingZone";

-import { ShippingMethodTypeEnum, WeightUnitsEnum } from "../types/globalTypes";
+import {
+  PostalCodeRuleInclusionTypeEnum,
+  ShippingMethodTypeEnum,
+  WeightUnitsEnum
+} from "../types/globalTypes";

 export const shippingZones: ShippingZoneFragment[] = [
  {
@ -1632,28 +1636,31 @@ export const shippingZone: ShippingZone_shippingZone = {
        value: 0
      },
      name: "DB Schenker",
-      privateMetadata: [],
-      type: ShippingMethodTypeEnum.WEIGHT,
-      zipCodeRules: [
+      postalCodeRules: [
        {
-          __typename: "ShippingMethodZipCodeRule",
+          __typename: "ShippingMethodPostalCodeRule",
          end: "51-220",
          id: "1",
+          inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
          start: "51-210"
        },
        {
-          __typename: "ShippingMethodZipCodeRule",
+          __typename: "ShippingMethodPostalCodeRule",
          end: "51-240",
          id: "2",
+          inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
          start: "51-235"
        },
        {
-          __typename: "ShippingMethodZipCodeRule",
+          __typename: "ShippingMethodPostalCodeRule",
          end: null,
          id: "2",
+          inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
          start: "51-274"
        }
-      ]
+      ],
+      privateMetadata: [],
+      type: ShippingMethodTypeEnum.WEIGHT
    },
    {
      __typename: "ShippingMethod",
@ -1693,28 +1700,31 @@ export const shippingZone: ShippingZone_shippingZone = {
        value: 0
      },
      name: "Registred priority",
-      privateMetadata: [],
-      type: ShippingMethodTypeEnum.WEIGHT,
-      zipCodeRules: [
+      postalCodeRules: [
        {
-          __typename: "ShippingMethodZipCodeRule",
+          __typename: "ShippingMethodPostalCodeRule",
          end: "51-220",
          id: "1",
+          inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
          start: "51-210"
        },
        {
-          __typename: "ShippingMethodZipCodeRule",
+          __typename: "ShippingMethodPostalCodeRule",
          end: "51-240",
          id: "2",
+          inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
          start: "51-235"
        },
        {
-          __typename: "ShippingMethodZipCodeRule",
+          __typename: "ShippingMethodPostalCodeRule",
          end: null,
          id: "2",
+          inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
          start: "51-274"
        }
-      ]
+      ],
+      privateMetadata: [],
+      type: ShippingMethodTypeEnum.WEIGHT
    },
    {
      __typename: "ShippingMethod",
@ -1754,28 +1764,31 @@ export const shippingZone: ShippingZone_shippingZone = {
        value: 0
      },
      name: "UPS",
-      privateMetadata: [],
-      type: ShippingMethodTypeEnum.PRICE,
-      zipCodeRules: [
+      postalCodeRules: [
        {
-          __typename: "ShippingMethodZipCodeRule",
+          __typename: "ShippingMethodPostalCodeRule",
          end: "51-220",
          id: "1",
+          inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
          start: "51-210"
        },
        {
-          __typename: "ShippingMethodZipCodeRule",
+          __typename: "ShippingMethodPostalCodeRule",
          end: "51-240",
          id: "2",
+          inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
          start: "51-235"
        },
        {
-          __typename: "ShippingMethodZipCodeRule",
+          __typename: "ShippingMethodPostalCodeRule",
          end: null,
          id: "2",
+          inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
          start: "51-274"
        }
-      ]
+      ],
+      privateMetadata: [],
+      type: ShippingMethodTypeEnum.PRICE
    },
    {
      __typename: "ShippingMethod",
@ -1802,28 +1815,31 @@ export const shippingZone: ShippingZone_shippingZone = {
        value: 0
      },
      name: "DHL",
-      privateMetadata: [],
-      type: ShippingMethodTypeEnum.PRICE,
-      zipCodeRules: [
+      postalCodeRules: [
        {
-          __typename: "ShippingMethodZipCodeRule",
+          __typename: "ShippingMethodPostalCodeRule",
          end: "51-220",
          id: "1",
+          inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
          start: "51-210"
        },
        {
-          __typename: "ShippingMethodZipCodeRule",
+          __typename: "ShippingMethodPostalCodeRule",
          end: "51-240",
          id: "2",
+          inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
          start: "51-235"
        },
        {
-          __typename: "ShippingMethodZipCodeRule",
+          __typename: "ShippingMethodPostalCodeRule",
          end: null,
          id: "2",
+          inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
          start: "51-274"
        }
-      ]
+      ],
+      privateMetadata: [],
+      type: ShippingMethodTypeEnum.PRICE
    }
  ],
  warehouses: [
--- a/src/shipping/handlers.ts
+++ b/src/shipping/handlers.ts
@ -1,5 +1,5 @@
 import { ChannelShippingData } from "@saleor/channels/utils";
-import { ShippingMethodFragment_zipCodeRules } from "@saleor/fragments/types/ShippingMethodFragment";
+import { ShippingMethodFragment_postalCodeRules } from "@saleor/fragments/types/ShippingMethodFragment";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
@ -8,13 +8,16 @@ import { FormData as ShippingZoneRatesPageFormData } from "@saleor/shipping/comp
 import { CreateShippingRateVariables } from "@saleor/shipping/types/CreateShippingRate";
 import { ShippingMethodChannelListingUpdateVariables } from "@saleor/shipping/types/ShippingMethodChannelListingUpdate";
 import { UpdateShippingRateVariables } from "@saleor/shipping/types/UpdateShippingRate";
-import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
+import {
+  PostalCodeRuleInclusionTypeEnum,
+  ShippingMethodTypeEnum,
+  ShippingPostalCodeRulesCreateInputRange
+} from "@saleor/types/globalTypes";
 import { diff } from "fast-array-diff";
 import { useIntl } from "react-intl";

 import {
  useShippingMethodChannelListingUpdate,
-  useShippingMethodZipCodeRangeAssign,
  useShippingRateCreate,
  useShippingRateDelete
 } from "./mutations";
@ -43,14 +46,32 @@ export const createChannelsChangeHandler = (
  triggerChange();
 };

+const getPostalCodeRulesToAdd = (
+  rules: ShippingMethodFragment_postalCodeRules[]
+) =>
+  rules
+    .filter(code => !code.id || code.id === "0")
+    .map(
+      code =>
+        ({
+          end: code.end,
+          start: code.start
+        } as ShippingPostalCodeRulesCreateInputRange)
+    );
+
 export function getCreateShippingPriceRateVariables(
  data: ShippingZoneRatesPageFormData,
-  id: string
+  id: string,
+  addPostalCodeRules: ShippingMethodFragment_postalCodeRules[],
+  inclusionType: PostalCodeRuleInclusionTypeEnum
 ): CreateShippingRateVariables {
  const parsedMinDays = parseInt(data.minDays, 10);
  const parsedMaxDays = parseInt(data.maxDays, 10);
+  const postalCodeRules = getPostalCodeRulesToAdd(addPostalCodeRules);
  return {
    input: {
+      addPostalCodeRules: postalCodeRules,
+      inclusionType,
      maximumDeliveryDays: parsedMaxDays,
      minimumDeliveryDays: parsedMinDays,
      name: data.name,
@ -62,15 +83,20 @@ export function getCreateShippingPriceRateVariables(

 export function getCreateShippingWeightRateVariables(
  data: ShippingZoneRatesPageFormData,
-  id: string
+  id: string,
+  addPostalCodeRules: ShippingMethodFragment_postalCodeRules[],
+  inclusionType: PostalCodeRuleInclusionTypeEnum
 ): CreateShippingRateVariables {
  const parsedMinValue = parseFloat(data.minValue);
  const parsedMaxValue = parseFloat(data.maxValue);
  const parsedMinDays = parseInt(data.minDays, 10);
  const parsedMaxDays = parseInt(data.maxDays, 10);
  const isWeightSet = !data.noLimits;
+  const postalCodeRules = getPostalCodeRulesToAdd(addPostalCodeRules);
  return {
    input: {
+      addPostalCodeRules: postalCodeRules,
+      inclusionType,
      maximumDeliveryDays: parsedMaxDays,
      maximumOrderWeight: isWeightSet ? parsedMaxValue : null,
      minimumDeliveryDays: parsedMinDays,
@ -85,13 +111,21 @@ export function getCreateShippingWeightRateVariables(
 export function getUpdateShippingPriceRateVariables(
  data: ShippingZoneRatesPageFormData,
  id: string,
-  rateId: string
+  rateId: string,
+  addPostalCodeRules: ShippingMethodFragment_postalCodeRules[],
+  deletePostalCodeRules: string[]
 ): UpdateShippingRateVariables {
  const parsedMinDays = parseInt(data.minDays, 10);
  const parsedMaxDays = parseInt(data.maxDays, 10);
+  const postalCodeRules = getPostalCodeRulesToAdd(addPostalCodeRules);
  return {
    id: rateId,
    input: {
+      addPostalCodeRules: postalCodeRules,
+      deletePostalCodeRules,
+      inclusionType:
+        addPostalCodeRules[0]?.inclusionType ||
+        PostalCodeRuleInclusionTypeEnum.EXCLUDE,
      maximumDeliveryDays: parsedMaxDays,
      minimumDeliveryDays: parsedMinDays,
      name: data.name,
@ -104,16 +138,24 @@ export function getUpdateShippingPriceRateVariables(
 export function getUpdateShippingWeightRateVariables(
  data: ShippingZoneRatesPageFormData,
  id: string,
-  rateId: string
+  rateId: string,
+  addPostalCodeRules: ShippingMethodFragment_postalCodeRules[],
+  deletePostalCodeRules: string[]
 ): UpdateShippingRateVariables {
  const parsedMinValue = parseFloat(data.minValue);
  const parsedMaxValue = parseFloat(data.maxValue);
  const parsedMinDays = parseInt(data.minDays, 10);
  const parsedMaxDays = parseInt(data.maxDays, 10);
  const isWeightSet = !data.noLimits;
+  const postalCodeRules = getPostalCodeRulesToAdd(addPostalCodeRules);
  return {
    id: rateId,
    input: {
+      addPostalCodeRules: postalCodeRules,
+      deletePostalCodeRules,
+      inclusionType:
+        addPostalCodeRules[0]?.inclusionType ||
+        PostalCodeRuleInclusionTypeEnum.EXCLUDE,
      maximumDeliveryDays: parsedMaxDays,
      maximumOrderWeight: isWeightSet ? parsedMaxValue : null,
      minimumDeliveryDays: parsedMinDays,
@ -156,7 +198,8 @@ export function getShippingMethodChannelVariables(
 export function useShippingRateCreator(
  shippingZoneId: string,
  type: ShippingMethodTypeEnum,
-  zipCodes: ShippingMethodFragment_zipCodeRules[]
+  postalCodes: ShippingMethodFragment_postalCodeRules[],
+  inclusionType: PostalCodeRuleInclusionTypeEnum
 ) {
  const intl = useIntl();
  const notify = useNotifier();
@ -165,10 +208,6 @@ export function useShippingRateCreator(
    createBaseShippingRate,
    createBaseShippingRateOpts
  ] = useShippingRateCreate({});
-  const [
-    assignZipCodeRules,
-    assignZipCodeRulesOpts
-  ] = useShippingMethodZipCodeRangeAssign({});
  const [
    updateShippingMethodChannelListing,
    updateShippingMethodChannelListingOpts
@ -186,7 +225,7 @@ export function useShippingRateCreator(

  const createShippingRate = async (data: ShippingZoneRatesPageFormData) => {
    const response = await createBaseShippingRate({
-      variables: getVariables(data, shippingZoneId)
+      variables: getVariables(data, shippingZoneId, postalCodes, inclusionType)
    });

    const createErrors = response.data.shippingPriceCreate.errors;
@ -200,17 +239,6 @@ export function useShippingRateCreator(
            data.noLimits,
            data.channelListings
          )
-        }),
-        assignZipCodeRules({
-          variables: {
-            id: rateId,
-            input: {
-              zipCodeRules: zipCodes.map(zipCodeRule => ({
-                end: zipCodeRule.end || null,
-                start: zipCodeRule.start
-              }))
-            }
-          }
        })
      ]);

@ -236,16 +264,12 @@ export function useShippingRateCreator(

  const called =
    createBaseShippingRateOpts.called ||
-    updateShippingMethodChannelListingOpts.called ||
-    assignZipCodeRulesOpts.called;
+    updateShippingMethodChannelListingOpts.called;
  const loading =
    createBaseShippingRateOpts.loading ||
-    updateShippingMethodChannelListingOpts.loading ||
-    assignZipCodeRulesOpts.loading;
+    updateShippingMethodChannelListingOpts.loading;
  const errors = [
-    ...(createBaseShippingRateOpts.data?.shippingPriceCreate.errors || []),
-    ...(assignZipCodeRulesOpts.data?.shippingMethodZipCodeRulesCreate.errors ||
-      [])
+    ...(createBaseShippingRateOpts.data?.shippingPriceCreate.errors || [])
  ];
  const channelErrors =
    updateShippingMethodChannelListingOpts.data
--- a/src/shipping/mutations.ts
+++ b/src/shipping/mutations.ts
@ -4,7 +4,6 @@ import {
 } from "@saleor/fragments/errors";
 import {
  shippingMethodFragment,
-  shippingMethodWithZipCodesFragment,
  shippingZoneDetailsFragment
 } from "@saleor/fragments/shipping";
 import { countryFragment } from "@saleor/fragments/taxes";
@ -39,14 +38,6 @@ import {
  ShippingMethodChannelListingUpdate,
  ShippingMethodChannelListingUpdateVariables
 } from "./types/ShippingMethodChannelListingUpdate";
-import {
-  ShippingMethodZipCodeRangeAssign,
-  ShippingMethodZipCodeRangeAssignVariables
-} from "./types/ShippingMethodZipCodeRangeAssign";
-import {
-  ShippingMethodZipCodeRangeUnassign,
-  ShippingMethodZipCodeRangeUnassignVariables
-} from "./types/ShippingMethodZipCodeRangeUnassign";
 import {
  ShippingPriceExcludeProduct,
  ShippingPriceExcludeProductVariables
@ -263,49 +254,6 @@ export const useShippingMethodChannelListingUpdate = makeMutation<
  ShippingMethodChannelListingUpdateVariables
 >(shippingMethodChannelListingUpdate);

-export const shippingMethodZipCodeRangeAssign = gql`
-  ${shippingChannelsErrorFragment}
-  ${shippingMethodWithZipCodesFragment}
-  mutation ShippingMethodZipCodeRangeAssign(
-    $id: ID!
-    $input: ShippingZipCodeRulesCreateInput!
-  ) {
-    shippingMethodZipCodeRulesCreate(shippingMethodId: $id, input: $input) {
-      errors: shippingErrors {
-        ...ShippingChannelsErrorFragment
-      }
-      shippingMethod {
-        ...ShippingMethodWithZipCodesFragment
-      }
-    }
-  }
-`;
-
-export const useShippingMethodZipCodeRangeAssign = makeMutation<
-  ShippingMethodZipCodeRangeAssign,
-  ShippingMethodZipCodeRangeAssignVariables
->(shippingMethodZipCodeRangeAssign);
-
-export const shippingMethodZipCodeRulesDelete = gql`
-  ${shippingChannelsErrorFragment}
-  ${shippingMethodWithZipCodesFragment}
-  mutation ShippingMethodZipCodeRangeUnassign($id: ID!) {
-    shippingMethodZipCodeRulesDelete(id: $id) {
-      errors: shippingErrors {
-        ...ShippingChannelsErrorFragment
-      }
-      shippingMethod {
-        ...ShippingMethodWithZipCodesFragment
-      }
-    }
-  }
-`;
-
-export const useShippingMethodZipCodeRangeUnassign = makeMutation<
-  ShippingMethodZipCodeRangeUnassign,
-  ShippingMethodZipCodeRangeUnassignVariables
->(shippingMethodZipCodeRulesDelete);
-
 export const shippingPriceExcludeProducts = gql`
  ${shippingErrorFragment}
  mutation ShippingPriceExcludeProduct(
--- a/src/shipping/types/CreateShippingRate.ts
+++ b/src/shipping/types/CreateShippingRate.ts
@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.

-import { ShippingPriceInput, ShippingErrorCode, WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTypes";
+import { ShippingPriceInput, ShippingErrorCode, PostalCodeRuleInclusionTypeEnum, WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTypes";

 // ====================================================
 // GraphQL mutation operation: CreateShippingRate
@ -32,9 +32,10 @@ export interface CreateShippingRate_shippingPriceCreate_shippingZone_countries {
  country: string;
 }

-export interface CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_zipCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+export interface CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_postalCodeRules {
+  __typename: "ShippingMethodPostalCodeRule";
  id: string;
+  inclusionType: PostalCodeRuleInclusionTypeEnum | null;
  start: string | null;
  end: string | null;
 }
@ -100,7 +101,7 @@ export interface CreateShippingRate_shippingPriceCreate_shippingZone_shippingMet
 export interface CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods {
  __typename: "ShippingMethod";
  id: string;
-  zipCodeRules: (CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_zipCodeRules | null)[] | null;
+  postalCodeRules: (CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_postalCodeRules | null)[] | null;
  metadata: (CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_metadata | null)[];
  privateMetadata: (CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_privateMetadata | null)[];
  minimumOrderWeight: CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_minimumOrderWeight | null;
@ -131,9 +132,10 @@ export interface CreateShippingRate_shippingPriceCreate_shippingZone {
  warehouses: (CreateShippingRate_shippingPriceCreate_shippingZone_warehouses | null)[] | null;
 }

-export interface CreateShippingRate_shippingPriceCreate_shippingMethod_zipCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+export interface CreateShippingRate_shippingPriceCreate_shippingMethod_postalCodeRules {
+  __typename: "ShippingMethodPostalCodeRule";
  id: string;
+  inclusionType: PostalCodeRuleInclusionTypeEnum | null;
  start: string | null;
  end: string | null;
 }
@ -199,7 +201,7 @@ export interface CreateShippingRate_shippingPriceCreate_shippingMethod_channelLi
 export interface CreateShippingRate_shippingPriceCreate_shippingMethod {
  __typename: "ShippingMethod";
  id: string;
-  zipCodeRules: (CreateShippingRate_shippingPriceCreate_shippingMethod_zipCodeRules | null)[] | null;
+  postalCodeRules: (CreateShippingRate_shippingPriceCreate_shippingMethod_postalCodeRules | null)[] | null;
  metadata: (CreateShippingRate_shippingPriceCreate_shippingMethod_metadata | null)[];
  privateMetadata: (CreateShippingRate_shippingPriceCreate_shippingMethod_privateMetadata | null)[];
  minimumOrderWeight: CreateShippingRate_shippingPriceCreate_shippingMethod_minimumOrderWeight | null;
--- a/src/shipping/types/DeleteShippingRate.ts
+++ b/src/shipping/types/DeleteShippingRate.ts
@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.

-import { ShippingErrorCode, WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTypes";
+import { ShippingErrorCode, PostalCodeRuleInclusionTypeEnum, WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTypes";

 // ====================================================
 // GraphQL mutation operation: DeleteShippingRate
@ -32,9 +32,10 @@ export interface DeleteShippingRate_shippingPriceDelete_shippingZone_countries {
  country: string;
 }

-export interface DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_zipCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+export interface DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_postalCodeRules {
+  __typename: "ShippingMethodPostalCodeRule";
  id: string;
+  inclusionType: PostalCodeRuleInclusionTypeEnum | null;
  start: string | null;
  end: string | null;
 }
@ -100,7 +101,7 @@ export interface DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMet
 export interface DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods {
  __typename: "ShippingMethod";
  id: string;
-  zipCodeRules: (DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_zipCodeRules | null)[] | null;
+  postalCodeRules: (DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_postalCodeRules | null)[] | null;
  metadata: (DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_metadata | null)[];
  privateMetadata: (DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_privateMetadata | null)[];
  minimumOrderWeight: DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_minimumOrderWeight | null;
--- a/src/shipping/types/ShippingMethodChannelListingUpdate.ts
+++ b/src/shipping/types/ShippingMethodChannelListingUpdate.ts
@ -2,15 +2,16 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.

-import { ShippingMethodChannelListingInput, WeightUnitsEnum, ShippingMethodTypeEnum, ShippingErrorCode } from "./../../types/globalTypes";
+import { ShippingMethodChannelListingInput, PostalCodeRuleInclusionTypeEnum, WeightUnitsEnum, ShippingMethodTypeEnum, ShippingErrorCode } from "./../../types/globalTypes";

 // ====================================================
 // GraphQL mutation operation: ShippingMethodChannelListingUpdate
 // ====================================================

-export interface ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_zipCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+export interface ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_postalCodeRules {
+  __typename: "ShippingMethodPostalCodeRule";
  id: string;
+  inclusionType: PostalCodeRuleInclusionTypeEnum | null;
  start: string | null;
  end: string | null;
 }
@ -76,7 +77,7 @@ export interface ShippingMethodChannelListingUpdate_shippingMethodChannelListing
 export interface ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod {
  __typename: "ShippingMethod";
  id: string;
-  zipCodeRules: (ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_zipCodeRules | null)[] | null;
+  postalCodeRules: (ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_postalCodeRules | null)[] | null;
  metadata: (ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_metadata | null)[];
  privateMetadata: (ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_privateMetadata | null)[];
  minimumOrderWeight: ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_minimumOrderWeight | null;
--- a/src/shipping/types/ShippingMethodZipCodeRangeAssign.ts
+++ b/src/shipping/types/ShippingMethodZipCodeRangeAssign.ts
@ -1,44 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// This file was automatically generated and should not be edited.
-
-import { ShippingZipCodeRulesCreateInput, ShippingErrorCode } from "./../../types/globalTypes";
-
-// ====================================================
-// GraphQL mutation operation: ShippingMethodZipCodeRangeAssign
-// ====================================================
-
-export interface ShippingMethodZipCodeRangeAssign_shippingMethodZipCodeRulesCreate_errors {
-  __typename: "ShippingError";
-  code: ShippingErrorCode;
-  field: string | null;
-  channels: string[] | null;
-}
-
-export interface ShippingMethodZipCodeRangeAssign_shippingMethodZipCodeRulesCreate_shippingMethod_zipCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
-  id: string;
-  start: string | null;
-  end: string | null;
-}
-
-export interface ShippingMethodZipCodeRangeAssign_shippingMethodZipCodeRulesCreate_shippingMethod {
-  __typename: "ShippingMethod";
-  id: string;
-  zipCodeRules: (ShippingMethodZipCodeRangeAssign_shippingMethodZipCodeRulesCreate_shippingMethod_zipCodeRules | null)[] | null;
-}
-
-export interface ShippingMethodZipCodeRangeAssign_shippingMethodZipCodeRulesCreate {
-  __typename: "ShippingZipCodeRulesCreate";
-  errors: ShippingMethodZipCodeRangeAssign_shippingMethodZipCodeRulesCreate_errors[];
-  shippingMethod: ShippingMethodZipCodeRangeAssign_shippingMethodZipCodeRulesCreate_shippingMethod | null;
-}
-
-export interface ShippingMethodZipCodeRangeAssign {
-  shippingMethodZipCodeRulesCreate: ShippingMethodZipCodeRangeAssign_shippingMethodZipCodeRulesCreate | null;
-}
-
-export interface ShippingMethodZipCodeRangeAssignVariables {
-  id: string;
-  input: ShippingZipCodeRulesCreateInput;
-}
--- a/src/shipping/types/ShippingMethodZipCodeRangeUnassign.ts
+++ b/src/shipping/types/ShippingMethodZipCodeRangeUnassign.ts
@ -1,43 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// This file was automatically generated and should not be edited.
-
-import { ShippingErrorCode } from "./../../types/globalTypes";
-
-// ====================================================
-// GraphQL mutation operation: ShippingMethodZipCodeRangeUnassign
-// ====================================================
-
-export interface ShippingMethodZipCodeRangeUnassign_shippingMethodZipCodeRulesDelete_errors {
-  __typename: "ShippingError";
-  code: ShippingErrorCode;
-  field: string | null;
-  channels: string[] | null;
-}
-
-export interface ShippingMethodZipCodeRangeUnassign_shippingMethodZipCodeRulesDelete_shippingMethod_zipCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
-  id: string;
-  start: string | null;
-  end: string | null;
-}
-
-export interface ShippingMethodZipCodeRangeUnassign_shippingMethodZipCodeRulesDelete_shippingMethod {
-  __typename: "ShippingMethod";
-  id: string;
-  zipCodeRules: (ShippingMethodZipCodeRangeUnassign_shippingMethodZipCodeRulesDelete_shippingMethod_zipCodeRules | null)[] | null;
-}
-
-export interface ShippingMethodZipCodeRangeUnassign_shippingMethodZipCodeRulesDelete {
-  __typename: "ShippingZipCodeRulesDelete";
-  errors: ShippingMethodZipCodeRangeUnassign_shippingMethodZipCodeRulesDelete_errors[];
-  shippingMethod: ShippingMethodZipCodeRangeUnassign_shippingMethodZipCodeRulesDelete_shippingMethod | null;
-}
-
-export interface ShippingMethodZipCodeRangeUnassign {
-  shippingMethodZipCodeRulesDelete: ShippingMethodZipCodeRangeUnassign_shippingMethodZipCodeRulesDelete | null;
-}
-
-export interface ShippingMethodZipCodeRangeUnassignVariables {
-  id: string;
-}
--- a/src/shipping/types/ShippingZone.ts
+++ b/src/shipping/types/ShippingZone.ts
@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.

-import { WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTypes";
+import { PostalCodeRuleInclusionTypeEnum, WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTypes";

 // ====================================================
 // GraphQL query operation: ShippingZone
@ -26,9 +26,10 @@ export interface ShippingZone_shippingZone_countries {
  country: string;
 }

-export interface ShippingZone_shippingZone_shippingMethods_zipCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+export interface ShippingZone_shippingZone_shippingMethods_postalCodeRules {
+  __typename: "ShippingMethodPostalCodeRule";
  id: string;
+  inclusionType: PostalCodeRuleInclusionTypeEnum | null;
  start: string | null;
  end: string | null;
 }
@ -125,7 +126,7 @@ export interface ShippingZone_shippingZone_shippingMethods_excludedProducts {
 export interface ShippingZone_shippingZone_shippingMethods {
  __typename: "ShippingMethod";
  id: string;
-  zipCodeRules: (ShippingZone_shippingZone_shippingMethods_zipCodeRules | null)[] | null;
+  postalCodeRules: (ShippingZone_shippingZone_shippingMethods_postalCodeRules | null)[] | null;
  metadata: (ShippingZone_shippingZone_shippingMethods_metadata | null)[];
  privateMetadata: (ShippingZone_shippingZone_shippingMethods_privateMetadata | null)[];
  minimumOrderWeight: ShippingZone_shippingZone_shippingMethods_minimumOrderWeight | null;
--- a/src/shipping/types/UpdateShippingRate.ts
+++ b/src/shipping/types/UpdateShippingRate.ts
@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.

-import { ShippingPriceInput, ShippingErrorCode, WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTypes";
+import { ShippingPriceInput, ShippingErrorCode, PostalCodeRuleInclusionTypeEnum, WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTypes";

 // ====================================================
 // GraphQL mutation operation: UpdateShippingRate
@ -14,9 +14,10 @@ export interface UpdateShippingRate_shippingPriceUpdate_errors {
  field: string | null;
 }

-export interface UpdateShippingRate_shippingPriceUpdate_shippingMethod_zipCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+export interface UpdateShippingRate_shippingPriceUpdate_shippingMethod_postalCodeRules {
+  __typename: "ShippingMethodPostalCodeRule";
  id: string;
+  inclusionType: PostalCodeRuleInclusionTypeEnum | null;
  start: string | null;
  end: string | null;
 }
@ -82,7 +83,7 @@ export interface UpdateShippingRate_shippingPriceUpdate_shippingMethod_channelLi
 export interface UpdateShippingRate_shippingPriceUpdate_shippingMethod {
  __typename: "ShippingMethod";
  id: string;
-  zipCodeRules: (UpdateShippingRate_shippingPriceUpdate_shippingMethod_zipCodeRules | null)[] | null;
+  postalCodeRules: (UpdateShippingRate_shippingPriceUpdate_shippingMethod_postalCodeRules | null)[] | null;
  metadata: (UpdateShippingRate_shippingPriceUpdate_shippingMethod_metadata | null)[];
  privateMetadata: (UpdateShippingRate_shippingPriceUpdate_shippingMethod_privateMetadata | null)[];
  minimumOrderWeight: UpdateShippingRate_shippingPriceUpdate_shippingMethod_minimumOrderWeight | null;
--- a/src/shipping/views/PriceRatesCreate/PriceRatesCreate.tsx
+++ b/src/shipping/views/PriceRatesCreate/PriceRatesCreate.tsx
@ -2,13 +2,11 @@ import { useChannelsList } from "@saleor/channels/queries";
 import { createSortedShippingChannels } from "@saleor/channels/utils";
 import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
 import { WindowTitle } from "@saleor/components/WindowTitle";
-import { ShippingMethodFragment_zipCodeRules } from "@saleor/fragments/types/ShippingMethodFragment";
 import useChannels from "@saleor/hooks/useChannels";
 import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
-import ShippingRateZipCodeRangeRemoveDialog from "@saleor/shipping/components/ShippingRateZipCodeRangeRemoveDialog";
+import ShippingZonePostalCodeRangeDialog from "@saleor/shipping/components/ShippingZonePostalCodeRangeDialog";
 import ShippingZoneRatesCreatePage from "@saleor/shipping/components/ShippingZoneRatesCreatePage";
-import ShippingZoneZipCodeRangeDialog from "@saleor/shipping/components/ShippingZoneZipCodeRangeDialog";
 import { useShippingRateCreator } from "@saleor/shipping/handlers";
 import {
  shippingPriceRatesUrl,
@ -16,10 +14,13 @@ import {
  ShippingRateCreateUrlQueryParams,
  shippingZoneUrl
 } from "@saleor/shipping/urls";
+import filterPostalCodes from "@saleor/shipping/views/utils";
 import { MinMax } from "@saleor/types";
-import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
+import {
+  PostalCodeRuleInclusionTypeEnum,
+  ShippingMethodTypeEnum
+} from "@saleor/types/globalTypes";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
-import { remove } from "@saleor/utils/lists";
 import React from "react";
 import { useIntl } from "react-intl";

@ -35,9 +36,10 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
  const navigate = useNavigator();
  const intl = useIntl();

-  const [zipCodes, setZipCodes] = React.useState<
-    ShippingMethodFragment_zipCodeRules[]
-  >([]);
+  const [postalCodes, setPostalCodes] = React.useState([]);
+  const [radioInclusionType, setRadioInclusionType] = React.useState(
+    PostalCodeRuleInclusionTypeEnum.EXCLUDE
+  );

  const { data: channelsData, loading: channelsLoading } = useChannelsList({});

@ -66,30 +68,35 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
    createShippingRate,
    errors,
    status
-  } = useShippingRateCreator(id, ShippingMethodTypeEnum.PRICE, zipCodes);
+  } = useShippingRateCreator(
+    id,
+    ShippingMethodTypeEnum.PRICE,
+    postalCodes,
+    radioInclusionType
+  );

  const handleBack = () => navigate(shippingZoneUrl(id));

-  const handleZipCodeRangeAdd = (data: MinMax) => {
-    setZipCodes(zipCodes => [
-      ...zipCodes,
+  const handlePostalCodeRangeAdd = (data: MinMax) => {
+    setPostalCodes(postalCodes => [
+      ...postalCodes,
      {
-        __typename: "ShippingMethodZipCodeRule",
        end: data.max,
-        id: zipCodes.length.toString(),
        start: data.min
      }
    ]);
    closeModal();
  };
-  const handleZipCodeRangeDelete = (id: string) => {
-    setZipCodes(zipCodes =>
-      remove(
-        zipCodes.find(zipCode => zipCode.id === id),
-        zipCodes,
-        (a, b) => a.id === b.id
-      )
-    );
+
+  const onPostalCodeInclusionChange = (
+    inclusion: PostalCodeRuleInclusionTypeEnum
+  ) => {
+    setRadioInclusionType(inclusion);
+    setPostalCodes([]);
+  };
+
+  const onPostalCodeUnassign = code => {
+    setPostalCodes(filterPostalCodes(postalCodes, code));
    closeModal();
  };

@ -123,29 +130,20 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
        onBack={handleBack}
        errors={errors}
        channelErrors={channelErrors}
-        zipCodes={zipCodes}
+        postalCodes={postalCodes}
        openChannelsModal={handleChannelsModalOpen}
        onChannelsChange={setCurrentChannels}
-        onZipCodeAssign={() => openModal("add-range")}
-        onZipCodeUnassign={id =>
-          openModal("remove-range", {
-            id
-          })
-        }
+        onPostalCodeAssign={() => openModal("add-range")}
+        onPostalCodeUnassign={onPostalCodeUnassign}
+        onPostalCodeInclusionChange={onPostalCodeInclusionChange}
        variant={ShippingMethodTypeEnum.PRICE}
      />
-      <ShippingZoneZipCodeRangeDialog
+      <ShippingZonePostalCodeRangeDialog
        confirmButtonState="default"
        onClose={closeModal}
-        onSubmit={handleZipCodeRangeAdd}
+        onSubmit={handlePostalCodeRangeAdd}
        open={params.action === "add-range"}
      />
-      <ShippingRateZipCodeRangeRemoveDialog
-        confirmButtonState="default"
-        onClose={closeModal}
-        onConfirm={() => handleZipCodeRangeDelete(params.id)}
-        open={params.action === "remove-range"}
-      />
    </>
  );
 };
--- a/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx
+++ b/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx
@ -20,11 +20,10 @@ import { commonMessages } from "@saleor/intl";
 import useProductSearch from "@saleor/searches/useProductSearch";
 import DeleteShippingRateDialog from "@saleor/shipping/components/DeleteShippingRateDialog";
 import ShippingMethodProductsAddDialog from "@saleor/shipping/components/ShippingMethodProductsAddDialog";
-import ShippingRateZipCodeRangeRemoveDialog from "@saleor/shipping/components/ShippingRateZipCodeRangeRemoveDialog";
+import ShippingZonePostalCodeRangeDialog from "@saleor/shipping/components/ShippingZonePostalCodeRangeDialog";
 import ShippingZoneRatesPage, {
  FormData
 } from "@saleor/shipping/components/ShippingZoneRatesPage";
-import ShippingZoneZipCodeRangeDialog from "@saleor/shipping/components/ShippingZoneZipCodeRangeDialog";
 import UnassignDialog from "@saleor/shipping/components/UnassignDialog";
 import {
  getShippingMethodChannelVariables,
@ -32,8 +31,6 @@ import {
 } from "@saleor/shipping/handlers";
 import {
  useShippingMethodChannelListingUpdate,
-  useShippingMethodZipCodeRangeAssign,
-  useShippingMethodZipCodeRangeUnassign,
  useShippingPriceExcludeProduct,
  useShippingPriceRemoveProductsFromExclude,
  useShippingRateDelete,
@ -46,7 +43,12 @@ import {
  ShippingRateUrlQueryParams,
  shippingZoneUrl
 } from "@saleor/shipping/urls";
-import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
+import filterPostalCodes from "@saleor/shipping/views/utils";
+import { MinMax } from "@saleor/types";
+import {
+  PostalCodeRuleInclusionTypeEnum,
+  ShippingMethodTypeEnum
+} from "@saleor/types/globalTypes";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
 import {
@ -110,43 +112,6 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
    updateShippingMethodChannelListingOpts
  ] = useShippingMethodChannelListingUpdate({});

-  const [
-    assignZipCodeRange,
-    assignZipCodeRangeOpts
-  ] = useShippingMethodZipCodeRangeAssign({
-    onCompleted: data => {
-      if (data.shippingMethodZipCodeRulesCreate.errors.length === 0) {
-        notify({
-          status: "success",
-          text: intl.formatMessage(commonMessages.savedChanges)
-        });
-        closeModal();
-      } else {
-        notify({
-          status: "error",
-          text: intl.formatMessage({
-            defaultMessage: "Cannot add specified postal codes range.",
-            description: "postal code range add error text"
-          })
-        });
-      }
-    }
-  });
-
-  const [
-    unassignZipCodeRange,
-    unassignZipCodeRangeOpts
-  ] = useShippingMethodZipCodeRangeUnassign({
-    onCompleted: data => {
-      if (data.shippingMethodZipCodeRulesDelete.errors.length === 0) {
-        notify({
-          status: "success",
-          text: intl.formatMessage(commonMessages.savedChanges)
-        });
-      }
-    }
-  });
-
  const [
    unassignProduct,
    unassignProductOpts
@ -209,10 +174,40 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
  const [updateMetadata] = useMetadataUpdate({});
  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});

+  const [codesToDelete, setCodesToDelete] = React.useState([]);
+  const [havePostalCodesChanged, setHavePostalCodesChanged] = React.useState(
+    false
+  );
+  const [originalCodes, setOriginalCodes] = React.useState([]);
+  const [inclusionType, setInclusionType] = React.useState(
+    rate?.postalCodeRules[0]?.inclusionType
+  );
+
+  const onPostalCodeInclusionChange = (
+    inclusion: PostalCodeRuleInclusionTypeEnum
+  ) => {
+    setInclusionType(inclusion);
+    setCodesToDelete(
+      rate.postalCodeRules
+        .filter(code => code.id !== undefined)
+        .map(code => code.id)
+    );
+    setHavePostalCodesChanged(true);
+    rate.postalCodeRules = [];
+  };
+
  const updateData = async (formData: FormData): Promise<unknown[]> => {
    const response = await updateShippingRate({
-      variables: getUpdateShippingPriceRateVariables(formData, id, rateId)
+      variables: getUpdateShippingPriceRateVariables(
+        formData,
+        id,
+        rateId,
+        rate.postalCodeRules,
+        codesToDelete
+      )
    });
+    setCodesToDelete([]);
+    setHavePostalCodesChanged(false);
    const errors = response.data.shippingPriceUpdate.errors;
    if (errors.length === 0) {
      handleSuccess();
@ -248,6 +243,41 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
    reset();
  };

+  const onPostalCodeAssign = (rule: MinMax) => {
+    if (!originalCodes.length) {
+      setOriginalCodes([...rate.postalCodeRules]);
+    }
+    if (
+      rate.postalCodeRules.filter(
+        item => item.start === rule.min && item.end === rule.max
+      ).length > 0
+    ) {
+      closeModal();
+      return;
+    }
+    const newCode = {
+      __typename: undefined,
+      end: rule.max,
+      id: undefined,
+      inclusionType,
+      start: rule.min
+    };
+    rate.postalCodeRules.push(newCode);
+    closeModal();
+  };
+
+  const onPostalCodeUnassign = code => {
+    if (code.id !== undefined) {
+      setCodesToDelete([...codesToDelete, code.id]);
+      rate.postalCodeRules = rate.postalCodeRules.filter(
+        rule => rule.id !== code.id
+      );
+    } else {
+      rate.postalCodeRules = filterPostalCodes(rate.postalCodeRules, code);
+    }
+    setHavePostalCodesChanged(true);
+  };
+
  const handleBack = () => navigate(shippingZoneUrl(id));

  return (
@ -314,6 +344,7 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
          assignProductOpts?.status === "loading"
        }
        hasChannelChanged={shippingChannels?.length !== currentChannels?.length}
+        havePostalCodesChanged={havePostalCodesChanged}
        saveButtonBarState={updateShippingRateOpts.status}
        onDelete={() => openModal("remove")}
        onSubmit={handleSubmit}
@ -344,45 +375,19 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
            />
          </Button>
        }
-        onZipCodeAssign={() => openModal("add-range")}
-        onZipCodeUnassign={id =>
-          openModal("remove-range", {
-            id
-          })
-        }
+        onPostalCodeInclusionChange={onPostalCodeInclusionChange}
+        onPostalCodeAssign={() => openModal("add-range")}
+        onPostalCodeUnassign={onPostalCodeUnassign}
      />
-      <ShippingZoneZipCodeRangeDialog
-        confirmButtonState={assignZipCodeRangeOpts.status}
+      <ShippingZonePostalCodeRangeDialog
+        confirmButtonState={"default"}
        onClose={closeModal}
-        onSubmit={data =>
-          assignZipCodeRange({
-            variables: {
-              id: rateId,
-              input: {
-                zipCodeRules: [
-                  {
-                    end: data.max || null,
-                    start: data.min
-                  }
-                ]
-              }
-            }
-          })
-        }
+        onSubmit={code => {
+          onPostalCodeAssign(code);
+          setHavePostalCodesChanged(true);
+        }}
        open={params.action === "add-range"}
      />
-      <ShippingRateZipCodeRangeRemoveDialog
-        confirmButtonState={unassignZipCodeRangeOpts.status}
-        onClose={closeModal}
-        onConfirm={() =>
-          unassignZipCodeRange({
-            variables: {
-              id: params.id
-            }
-          })
-        }
-        open={params.action === "remove-range"}
-      />
    </>
  );
 };
--- a/src/shipping/views/WeightRatesCreate/WeightRatesCreate.tsx
+++ b/src/shipping/views/WeightRatesCreate/WeightRatesCreate.tsx
@ -5,13 +5,11 @@ import {
 } from "@saleor/channels/utils";
 import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
 import { WindowTitle } from "@saleor/components/WindowTitle";
-import { ShippingMethodFragment_zipCodeRules } from "@saleor/fragments/types/ShippingMethodFragment";
 import useChannels from "@saleor/hooks/useChannels";
 import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
-import ShippingRateZipCodeRangeRemoveDialog from "@saleor/shipping/components/ShippingRateZipCodeRangeRemoveDialog";
+import ShippingZonePostalCodeRangeDialog from "@saleor/shipping/components/ShippingZonePostalCodeRangeDialog";
 import ShippingZoneRatesCreatePage from "@saleor/shipping/components/ShippingZoneRatesCreatePage";
-import ShippingZoneZipCodeRangeDialog from "@saleor/shipping/components/ShippingZoneZipCodeRangeDialog";
 import { useShippingRateCreator } from "@saleor/shipping/handlers";
 import {
  ShippingRateCreateUrlDialog,
@ -19,10 +17,13 @@ import {
  shippingWeightRatesUrl,
  shippingZoneUrl
 } from "@saleor/shipping/urls";
+import filterPostalCodes from "@saleor/shipping/views/utils";
 import { MinMax } from "@saleor/types";
-import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
+import {
+  PostalCodeRuleInclusionTypeEnum,
+  ShippingMethodTypeEnum
+} from "@saleor/types/globalTypes";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
-import { remove } from "@saleor/utils/lists";
 import React from "react";
 import { useIntl } from "react-intl";

@ -38,9 +39,10 @@ export const WeightRatesCreate: React.FC<WeightRatesCreateProps> = ({
  const navigate = useNavigator();
  const intl = useIntl();

-  const [zipCodes, setZipCodes] = React.useState<
-    ShippingMethodFragment_zipCodeRules[]
-  >([]);
+  const [postalCodes, setPostalCodes] = React.useState([]);
+  const [radioInclusionType, setRadioInclusionType] = React.useState(
+    PostalCodeRuleInclusionTypeEnum.EXCLUDE
+  );

  const { data: channelsData, loading: channelsLoading } = useChannelsList({});

@ -70,30 +72,38 @@ export const WeightRatesCreate: React.FC<WeightRatesCreateProps> = ({
    createShippingRate,
    errors,
    status
-  } = useShippingRateCreator(id, ShippingMethodTypeEnum.WEIGHT, zipCodes);
+  } = useShippingRateCreator(
+    id,
+    ShippingMethodTypeEnum.WEIGHT,
+    postalCodes,
+    radioInclusionType
+  );

  const handleBack = () => navigate(shippingZoneUrl(id));

-  const handleZipCodeRangeAdd = (data: MinMax) => {
-    setZipCodes(zipCodes => [
-      ...zipCodes,
+  const handlePostalCodeRangeAdd = (data: MinMax) => {
+    setPostalCodes(postalCodes => [
+      ...postalCodes,
      {
-        __typename: "ShippingMethodZipCodeRule",
+        __typename: "ShippingMethodPostalCodeRule",
        end: data.max,
-        id: zipCodes.length.toString(),
+        id: postalCodes.length.toString(),
+        inclusionType: postalCodes?.[0]?.inclusionType,
        start: data.min
      }
    ]);
    closeModal();
  };
-  const handleZipCodeRangeDelete = (id: string) => {
-    setZipCodes(zipCodes =>
-      remove(
-        zipCodes.find(zipCode => zipCode.id === id),
-        zipCodes,
-        (a, b) => a.id === b.id
-      )
-    );
+
+  const onPostalCodeInclusionChange = (
+    inclusion: PostalCodeRuleInclusionTypeEnum
+  ) => {
+    setRadioInclusionType(inclusion);
+    setPostalCodes([]);
+  };
+
+  const onPostalCodeUnassign = code => {
+    setPostalCodes(filterPostalCodes(postalCodes, code));
    closeModal();
  };

@ -126,29 +136,20 @@ export const WeightRatesCreate: React.FC<WeightRatesCreateProps> = ({
        onBack={handleBack}
        errors={errors}
        channelErrors={channelErrors}
-        zipCodes={zipCodes}
+        postalCodes={postalCodes}
        openChannelsModal={handleChannelsModalOpen}
        onChannelsChange={setCurrentChannels}
-        onZipCodeAssign={() => openModal("add-range")}
-        onZipCodeUnassign={id =>
-          openModal("remove-range", {
-            id
-          })
-        }
+        onPostalCodeAssign={() => openModal("add-range")}
+        onPostalCodeUnassign={onPostalCodeUnassign}
+        onPostalCodeInclusionChange={onPostalCodeInclusionChange}
        variant={ShippingMethodTypeEnum.WEIGHT}
      />
-      <ShippingZoneZipCodeRangeDialog
+      <ShippingZonePostalCodeRangeDialog
        confirmButtonState="default"
        onClose={closeModal}
-        onSubmit={handleZipCodeRangeAdd}
+        onSubmit={handlePostalCodeRangeAdd}
        open={params.action === "add-range"}
      />
-      <ShippingRateZipCodeRangeRemoveDialog
-        confirmButtonState="default"
-        onClose={closeModal}
-        onConfirm={() => handleZipCodeRangeDelete(params.id)}
-        open={params.action === "remove-range"}
-      />
    </>
  );
 };
--- a/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx
+++ b/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx
@ -20,11 +20,10 @@ import { commonMessages } from "@saleor/intl";
 import useProductSearch from "@saleor/searches/useProductSearch";
 import DeleteShippingRateDialog from "@saleor/shipping/components/DeleteShippingRateDialog";
 import ShippingMethodProductsAddDialog from "@saleor/shipping/components/ShippingMethodProductsAddDialog";
-import ShippingRateZipCodeRangeRemoveDialog from "@saleor/shipping/components/ShippingRateZipCodeRangeRemoveDialog";
+import ShippingZonePostalCodeRangeDialog from "@saleor/shipping/components/ShippingZonePostalCodeRangeDialog";
 import ShippingZoneRatesPage, {
  FormData
 } from "@saleor/shipping/components/ShippingZoneRatesPage";
-import ShippingZoneZipCodeRangeDialog from "@saleor/shipping/components/ShippingZoneZipCodeRangeDialog";
 import UnassignDialog from "@saleor/shipping/components/UnassignDialog";
 import {
  getShippingMethodChannelVariables,
@ -32,8 +31,6 @@ import {
 } from "@saleor/shipping/handlers";
 import {
  useShippingMethodChannelListingUpdate,
-  useShippingMethodZipCodeRangeAssign,
-  useShippingMethodZipCodeRangeUnassign,
  useShippingPriceExcludeProduct,
  useShippingPriceRemoveProductsFromExclude,
  useShippingRateDelete,
@ -46,7 +43,12 @@ import {
  shippingWeightRatesEditUrl,
  shippingZoneUrl
 } from "@saleor/shipping/urls";
-import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
+import filterPostalCodes from "@saleor/shipping/views/utils";
+import { MinMax } from "@saleor/types";
+import {
+  PostalCodeRuleInclusionTypeEnum,
+  ShippingMethodTypeEnum
+} from "@saleor/types/globalTypes";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
 import {
@ -84,6 +86,51 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
    ShippingRateUrlQueryParams
  >(navigate, params => shippingWeightRatesEditUrl(id, rateId, params), params);

+  const [codesToDelete, setCodesToDelete] = React.useState([]);
+  const [havePostalCodesChanged, setHavePostalCodesChanged] = React.useState(
+    false
+  );
+  const [originalCodes, setOriginalCodes] = React.useState([]);
+  const [inclusionType, setInclusionType] = React.useState(
+    PostalCodeRuleInclusionTypeEnum.EXCLUDE
+  );
+
+  const onPostalCodeInclusionChange = (
+    inclusion: PostalCodeRuleInclusionTypeEnum
+  ) => {
+    setInclusionType(inclusion);
+    setCodesToDelete(
+      rate.postalCodeRules
+        .filter(code => code.id !== undefined)
+        .map(code => code.id)
+    );
+    setHavePostalCodesChanged(true);
+    rate.postalCodeRules = [];
+  };
+
+  const onPostalCodeAssign = (rule: MinMax) => {
+    if (!originalCodes.length) {
+      setOriginalCodes([...rate.postalCodeRules]);
+    }
+    if (
+      rate.postalCodeRules.filter(
+        item => item.start === rule.min && item.end === rule.max
+      ).length > 0
+    ) {
+      closeModal();
+      return;
+    }
+    const newCode = {
+      __typename: undefined,
+      end: rule.max,
+      id: undefined,
+      inclusionType,
+      start: rule.min
+    };
+    rate.postalCodeRules.push(newCode);
+    closeModal();
+  };
+
  const {
    loadMore,
    search: productsSearch,
@ -171,50 +218,21 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
    }
  });

-  const [
-    assignZipCodeRange,
-    assignZipCodeRangeOpts
-  ] = useShippingMethodZipCodeRangeAssign({
-    onCompleted: data => {
-      if (data.shippingMethodZipCodeRulesCreate.errors.length === 0) {
-        notify({
-          status: "success",
-          text: intl.formatMessage(commonMessages.savedChanges)
-        });
-        closeModal();
-      } else {
-        notify({
-          status: "error",
-          text: intl.formatMessage({
-            defaultMessage: "Cannot add specified postal codes range.",
-            description: "postal code range add error text"
-          })
-        });
-      }
-    }
-  });
-  const [
-    unassignZipCodeRange,
-    unassignZipCodeRangeOpts
-  ] = useShippingMethodZipCodeRangeUnassign({
-    onCompleted: data => {
-      if (data.shippingMethodZipCodeRulesDelete.errors.length === 0) {
-        notify({
-          status: "success",
-          text: intl.formatMessage(commonMessages.savedChanges)
-        });
-        closeModal();
-      }
-    }
-  });
-
  const [updateMetadata] = useMetadataUpdate({});
  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});

  const updateData = async (data: FormData) => {
    const response = await updateShippingRate({
-      variables: getUpdateShippingWeightRateVariables(data, id, rateId)
+      variables: getUpdateShippingWeightRateVariables(
+        data,
+        id,
+        rateId,
+        rate.postalCodeRules,
+        codesToDelete
+      )
    });
+    setCodesToDelete([]);
+    setHavePostalCodesChanged(false);
    const errors = response.data.shippingPriceUpdate.errors;
    if (errors.length === 0) {
      handleSuccess();
@ -231,6 +249,18 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
    return errors;
  };

+  const onPostalCodeUnassign = code => {
+    if (code.id !== undefined) {
+      setCodesToDelete([...codesToDelete, code.id]);
+      rate.postalCodeRules = rate.postalCodeRules.filter(
+        rule => rule.id !== code.id
+      );
+    } else {
+      rate.postalCodeRules = filterPostalCodes(rate.postalCodeRules, code);
+    }
+    setHavePostalCodesChanged(true);
+  };
+
  const handleSubmit = createMetadataUpdateHandler(
    rate,
    updateData,
@ -316,6 +346,7 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
          assignProductOpts?.status === "loading"
        }
        hasChannelChanged={shippingChannels?.length !== currentChannels?.length}
+        havePostalCodesChanged={havePostalCodesChanged}
        saveButtonBarState={updateShippingRateOpts.status}
        onDelete={() => openModal("remove")}
        onSubmit={handleSubmit}
@ -346,45 +377,19 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
            />
          </Button>
        }
-        onZipCodeAssign={() => openModal("add-range")}
-        onZipCodeUnassign={id =>
-          openModal("remove-range", {
-            id
-          })
-        }
+        onPostalCodeInclusionChange={onPostalCodeInclusionChange}
+        onPostalCodeAssign={() => openModal("add-range")}
+        onPostalCodeUnassign={onPostalCodeUnassign}
      />
-      <ShippingZoneZipCodeRangeDialog
-        confirmButtonState={assignZipCodeRangeOpts.status}
+      <ShippingZonePostalCodeRangeDialog
+        confirmButtonState={"default"}
        onClose={closeModal}
-        onSubmit={data =>
-          assignZipCodeRange({
-            variables: {
-              id: rateId,
-              input: {
-                zipCodeRules: [
-                  {
-                    end: data.max || null,
-                    start: data.min
-                  }
-                ]
-              }
-            }
-          })
-        }
+        onSubmit={code => {
+          onPostalCodeAssign(code);
+          setHavePostalCodesChanged(true);
+        }}
        open={params.action === "add-range"}
      />
-      <ShippingRateZipCodeRangeRemoveDialog
-        confirmButtonState={unassignZipCodeRangeOpts.status}
-        onClose={closeModal}
-        onConfirm={() =>
-          unassignZipCodeRange({
-            variables: {
-              id: params.id
-            }
-          })
-        }
-        open={params.action === "remove-range"}
-      />
    </>
  );
 };
--- a/src/shipping/views/utils.tsx
+++ b/src/shipping/views/utils.tsx
@ -0,0 +1,7 @@
+const filterPostalCodes = (postalCodes, codeToFilterOut) =>
+  postalCodes.filter(
+    rule =>
+      rule.start !== codeToFilterOut.start && rule.end !== codeToFilterOut.end
+  );
+
+export default filterPostalCodes;
--- a/src/storybook/snapshots/Stories.test.ts.snap
+++ b/src/storybook/snapshots/Stories.test.ts.snap
--- a/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx
+++ b/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx
@ -5,7 +5,10 @@ import LanguageSwitch from "@saleor/components/LanguageSwitch";
 import PageHeader from "@saleor/components/PageHeader";
 import { CategoryTranslationFragment } from "@saleor/fragments/types/CategoryTranslationFragment";
 import { commonMessages, sectionNames } from "@saleor/intl";
-import { TranslationsEntitiesPageProps } from "@saleor/translations/types";
+import {
+  TranslationInputFieldName,
+  TranslationsEntitiesPageProps
+} from "@saleor/translations/types";
 import React from "react";
 import { useIntl } from "react-intl";

@ -17,13 +20,6 @@ export interface TranslationsCategoriesPageProps
  data: CategoryTranslationFragment;
 }

-export const fieldNames = {
-  description: "description",
-  name: "name",
-  seoDescription: "seoDescription",
-  seoTitle: "seoTitle"
-};
-
 const TranslationsCategoriesPage: React.FC<TranslationsCategoriesPageProps> = ({
  activeField,
  disabled,
@ -72,14 +68,14 @@ const TranslationsCategoriesPage: React.FC<TranslationsCategoriesPageProps> = ({
            displayName: intl.formatMessage({
              defaultMessage: "Category Name"
            }),
-            name: fieldNames.name,
+            name: TranslationInputFieldName.name,
            translation: data?.translation?.name || null,
            type: "short" as "short",
            value: data?.category?.name
          },
          {
            displayName: intl.formatMessage(commonMessages.description),
-            name: fieldNames.description,
+            name: TranslationInputFieldName.description,
            translation: data?.translation?.description || null,
            type: "rich" as "rich",
            value: data?.category?.description
@ -103,7 +99,7 @@ const TranslationsCategoriesPage: React.FC<TranslationsCategoriesPageProps> = ({
            displayName: intl.formatMessage({
              defaultMessage: "Search Engine Title"
            }),
-            name: fieldNames.seoTitle,
+            name: TranslationInputFieldName.seoTitle,
            translation: data?.translation?.seoTitle || null,
            type: "short" as "short",
            value: data?.category?.seoTitle
@ -112,7 +108,7 @@ const TranslationsCategoriesPage: React.FC<TranslationsCategoriesPageProps> = ({
            displayName: intl.formatMessage({
              defaultMessage: "Search Engine Description"
            }),
-            name: fieldNames.seoDescription,
+            name: TranslationInputFieldName.seoDescription,
            translation: data?.translation?.seoDescription || null,
            type: "long" as "long",
            value: data?.category?.seoDescription
--- a/src/translations/components/TranslationsCollectionsPage/TranslationsCollectionsPage.tsx
+++ b/src/translations/components/TranslationsCollectionsPage/TranslationsCollectionsPage.tsx
@ -5,7 +5,10 @@ import LanguageSwitch from "@saleor/components/LanguageSwitch";
 import PageHeader from "@saleor/components/PageHeader";
 import { CollectionTranslationFragment } from "@saleor/fragments/types/CollectionTranslationFragment";
 import { commonMessages, sectionNames } from "@saleor/intl";
-import { TranslationsEntitiesPageProps } from "@saleor/translations/types";
+import {
+  TranslationInputFieldName,
+  TranslationsEntitiesPageProps
+} from "@saleor/translations/types";
 import React from "react";
 import { useIntl } from "react-intl";

@ -17,13 +20,6 @@ export interface TranslationsCollectionsPageProps
  data: CollectionTranslationFragment;
 }

-export const fieldNames = {
-  description: "description",
-  name: "name",
-  seoDescription: "seoDescription",
-  seoTitle: "seoTitle"
-};
-
 const TranslationsCollectionsPage: React.FC<TranslationsCollectionsPageProps> = ({
  activeField,
  disabled,
@ -73,14 +69,14 @@ const TranslationsCollectionsPage: React.FC<TranslationsCollectionsPageProps> =
            displayName: intl.formatMessage({
              defaultMessage: "Collection Name"
            }),
-            name: fieldNames.name,
+            name: TranslationInputFieldName.name,
            translation: data?.translation?.name || null,
            type: "short" as "short",
            value: data?.collection?.name
          },
          {
            displayName: intl.formatMessage(commonMessages.description),
-            name: fieldNames.description,
+            name: TranslationInputFieldName.description,
            translation: data?.translation?.description || null,
            type: "rich" as "rich",
            value: data?.collection?.description
@ -104,7 +100,7 @@ const TranslationsCollectionsPage: React.FC<TranslationsCollectionsPageProps> =
            displayName: intl.formatMessage({
              defaultMessage: "Search Engine Title"
            }),
-            name: fieldNames.seoTitle,
+            name: TranslationInputFieldName.seoTitle,
            translation: data?.translation?.seoTitle || null,
            type: "short" as "short",
            value: data?.collection?.seoTitle
@ -113,7 +109,7 @@ const TranslationsCollectionsPage: React.FC<TranslationsCollectionsPageProps> =
            displayName: intl.formatMessage({
              defaultMessage: "Search Engine Description"
            }),
-            name: fieldNames.seoDescription,
+            name: TranslationInputFieldName.seoDescription,
            translation: data?.translation?.seoDescription || null,
            type: "long" as "long",
            value: data?.collection?.seoDescription
--- a/src/translations/components/TranslationsPagesPage/TranslationsPagesPage.tsx
+++ b/src/translations/components/TranslationsPagesPage/TranslationsPagesPage.tsx
@ -5,7 +5,10 @@ import LanguageSwitch from "@saleor/components/LanguageSwitch";
 import PageHeader from "@saleor/components/PageHeader";
 import { PageTranslationFragment } from "@saleor/fragments/types/PageTranslationFragment";
 import { commonMessages, sectionNames } from "@saleor/intl";
-import { TranslationsEntitiesPageProps } from "@saleor/translations/types";
+import {
+  PageTranslationInputFieldName,
+  TranslationsEntitiesPageProps
+} from "@saleor/translations/types";
 import React from "react";
 import { useIntl } from "react-intl";

@ -17,13 +20,6 @@ export interface TranslationsPagesPageProps
  data: PageTranslationFragment;
 }

-export const fieldNames = {
-  content: "content",
-  seoDescription: "seoDescription",
-  seoTitle: "seoTitle",
-  title: "title"
-};
-
 const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
  activeField,
  disabled,
@ -72,7 +68,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
            displayName: intl.formatMessage({
              defaultMessage: "Page Title"
            }),
-            name: fieldNames.title,
+            name: PageTranslationInputFieldName.title,
            translation: data?.translation?.title || null,
            type: "short" as "short",
            value: data?.page?.title
@ -82,7 +78,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
              defaultMessage: "Content",
              description: "page content"
            }),
-            name: fieldNames.content,
+            name: PageTranslationInputFieldName.content,
            translation: data?.translation?.content || null,
            type: "rich" as "rich",
            value: data?.page?.content
@ -106,7 +102,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
            displayName: intl.formatMessage({
              defaultMessage: "Search Engine Title"
            }),
-            name: fieldNames.seoTitle,
+            name: PageTranslationInputFieldName.seoTitle,
            translation: data?.translation?.seoTitle || null,
            type: "short" as "short",
            value: data?.page?.seoTitle
@ -115,7 +111,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
            displayName: intl.formatMessage({
              defaultMessage: "Search Engine Description"
            }),
-            name: fieldNames.seoDescription,
+            name: PageTranslationInputFieldName.seoDescription,
            translation: data?.translation?.seoDescription || null,
            type: "long" as "long",
            value: data?.page?.seoDescription
--- a/src/translations/components/TranslationsProductsPage/TranslationsProductsPage.tsx
+++ b/src/translations/components/TranslationsProductsPage/TranslationsProductsPage.tsx
@ -5,7 +5,10 @@ import LanguageSwitch from "@saleor/components/LanguageSwitch";
 import PageHeader from "@saleor/components/PageHeader";
 import { ProductTranslationFragment } from "@saleor/fragments/types/ProductTranslationFragment";
 import { commonMessages, sectionNames } from "@saleor/intl";
-import { TranslationsEntitiesPageProps } from "@saleor/translations/types";
+import {
+  TranslationInputFieldName,
+  TranslationsEntitiesPageProps
+} from "@saleor/translations/types";
 import React from "react";
 import { useIntl } from "react-intl";

@ -17,13 +20,6 @@ export interface TranslationsProductsPageProps
  data: ProductTranslationFragment;
 }

-export const fieldNames = {
-  description: "description",
-  name: "name",
-  seoDescription: "seoDescription",
-  seoTitle: "seoTitle"
-};
-
 const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
  activeField,
  disabled,
@ -73,7 +69,7 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
            displayName: intl.formatMessage({
              defaultMessage: "Product Name"
            }),
-            name: fieldNames.name,
+            name: TranslationInputFieldName.name,
            translation: data?.translation?.name || null,
            type: "short" as "short",
            value: data?.product?.name
@ -82,7 +78,7 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
            displayName: intl.formatMessage({
              defaultMessage: "Description"
            }),
-            name: fieldNames.description,
+            name: TranslationInputFieldName.description,
            translation: data?.translation?.description || null,
            type: "rich" as "rich",
            value: data?.product?.description
@ -106,7 +102,7 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
            displayName: intl.formatMessage({
              defaultMessage: "Search Engine Title"
            }),
-            name: fieldNames.seoTitle,
+            name: TranslationInputFieldName.seoTitle,
            translation: data?.translation?.seoTitle || null,
            type: "short" as "short",
            value: data?.product?.seoTitle
@ -115,7 +111,7 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
            displayName: intl.formatMessage({
              defaultMessage: "Search Engine Description"
            }),
-            name: fieldNames.seoDescription,
+            name: TranslationInputFieldName.seoDescription,
            translation: data?.translation?.seoDescription || null,
            type: "long" as "long",
            value: data?.product?.seoDescription
--- a/src/translations/mutations.ts
+++ b/src/translations/mutations.ts
@ -107,6 +107,7 @@ const updateCategoryTranslations = gql`
    }
  }
 `;
+
 export const TypedUpdateCategoryTranslations = TypedMutation<
  UpdateCategoryTranslations,
  UpdateCategoryTranslationsVariables
@ -143,6 +144,7 @@ const updateCollectionTranslations = gql`
    }
  }
 `;
+
 export const TypedUpdateCollectionTranslations = TypedMutation<
  UpdateCollectionTranslations,
  UpdateCollectionTranslationsVariables
--- a/src/translations/types.ts
+++ b/src/translations/types.ts
@ -14,3 +14,17 @@ export interface TranslationsEntitiesPageProps {
  onLanguageChange: (lang: string) => void;
  onSubmit: (field: string, data: string | OutputData) => void;
 }
+
+export enum TranslationInputFieldName {
+  description = "description",
+  name = "name",
+  seoDescription = "seoDescription",
+  seoTitle = "seoTitle"
+}
+
+export enum PageTranslationInputFieldName {
+  content = "content",
+  title = "title",
+  seoDescription = "seoDescription",
+  seoTitle = "seoTitle"
+}
--- a/src/translations/types/CategoryTranslationDetails.ts
+++ b/src/translations/types/CategoryTranslationDetails.ts
@ -20,7 +20,7 @@ export interface CategoryTranslationDetails_translation_CategoryTranslatableCont
 export interface CategoryTranslationDetails_translation_CategoryTranslatableContent_translation {
  __typename: "CategoryTranslation";
  id: string;
-  description: any;
+  description: any | null;
  language: CategoryTranslationDetails_translation_CategoryTranslatableContent_translation_language;
  name: string;
  seoDescription: string | null;
@ -31,7 +31,7 @@ export interface CategoryTranslationDetails_translation_CategoryTranslatableCont
  __typename: "Category";
  id: string;
  name: string;
-  description: any;
+  description: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
 }
--- a/src/translations/types/CategoryTranslations.ts
+++ b/src/translations/types/CategoryTranslations.ts
@ -20,7 +20,7 @@ export interface CategoryTranslations_translations_edges_node_CategoryTranslatab
 export interface CategoryTranslations_translations_edges_node_CategoryTranslatableContent_translation {
  __typename: "CategoryTranslation";
  id: string;
-  description: any;
+  description: any | null;
  language: CategoryTranslations_translations_edges_node_CategoryTranslatableContent_translation_language;
  name: string;
  seoDescription: string | null;
@ -31,7 +31,7 @@ export interface CategoryTranslations_translations_edges_node_CategoryTranslatab
  __typename: "Category";
  id: string;
  name: string;
-  description: any;
+  description: any | null;
  seoDescription: string | null;
  seoTitle: string | null;
 }
--- a/Show more
+++ b/Show more