Implement inclusion feature of postal codes (#983)

* Temporary merged schema and types update

* Update typing for zipCodeRules -> postalCodeRules

* Refactor zipCodes to postalCodes

* Fix new schema webhooks

* Delete postal code unassign dialog

* Query inclusion type from backend

* Clean up schema from old mutations

* Proper new mutations structure, all postal code related changes

* Linter changes

* Fix bug with save not being refreshed after codes are added / deleted / inclusion change

* Tests and translations

* Fix warnings across app, minor variables refactor

* Linting

* Trigger deployment

* CR changes, cleanups and refactors

* Update snapshots

* Resolve bug with radio not shows correct value on page refresh

* Fix price and weight creation of codes

* Reducer

* Revert "Reducer"

This reverts commit 07a3aed9c88332bde7d9be61b6dbc29e34e4edba.

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"

schema.graphql

@@ -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
@@ -3824,6 +3822,11 @@ input PluginUpdateInput {
 
 scalar PositiveDecimal
 
+enum PostalCodeRuleInclusionTypeEnum {
+  INCLUDE
+  EXCLUDE
+}
+
 input PriceRangeInput {
   gte: Float
   lte: Float
@@ -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 {
+input ShippingPostalCodeRulesCreateInputRange {
-  start: String
+  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!

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,

src/channels/components/ChannelDeleteDialog/ChannelDeleteDialog.tsx

@@ -13,16 +13,20 @@ import { defineMessages, useIntl } from "react-intl";
 import { useStyles } from "../styles";
 
 const messages = defineMessages({
-  needToBeMoved: {
+  deleteChannel: {
-    defaultMessage:
+    defaultMessage: "Delete Channel",
-      "All order information from this channel need to be moved to a different channel. Please select channel orders need to be moved to:.",
+    description: "dialog header"
-    description: "delete channel"
   },
   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"
   }
 });
 

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"

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: {
+  defaultShippingAddress: {
-    defaultMessage: "Set as default shipping address",
+    defaultMessage: "Default Shipping Address"
-    description: "button"
   },
-  setDefaultBilling: {
+  deleteAddress: {
-    defaultMessage: "Set as default billing address",
+    defaultMessage: "Delete Address",
     description: "button"
   },
   editAddress: {
     defaultMessage: "Edit Address",
     description: "button"
   },
-  deleteAddress: {
+  setDefaultBilling: {
-    defaultMessage: "Delete Address",
+    defaultMessage: "Set as default billing address",
+    description: "button"
+  },
+  setDefaultShipping: {
+    defaultMessage: "Set as default shipping address",
     description: "button"
   }
 });

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."
   }
 });
 

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)
   };
 

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: []
 };

src/fragments/shipping.ts

@@ -17,11 +17,12 @@ export const shippingZoneFragment = gql`
   }
 `;
 
-export const shippingMethodWithZipCodesFragment = gql`
+export const shippingMethodWithPostalCodesFragment = gql`
-  fragment ShippingMethodWithZipCodesFragment on ShippingMethod {
+  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

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 {
+export interface ShippingMethodFragment_postalCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+  __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;

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 {
+export interface ShippingMethodWithExcludedProductsFragment_postalCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+  __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;

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;
+}

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 {
+export interface ShippingMethodWithZipCodesFragment_postalCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+  __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;
 }

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 {
+export interface ShippingZoneDetailsFragment_shippingMethods_postalCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+  __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;

src/index.tsx

@@ -167,8 +167,8 @@ const Routes: React.FC = () => {
 
               dispatchAppState({
                 payload: {
-                  errorId,
+                  error: "unhandled",
-                  error: "unhandled"
+                  errorId
                 },
                 type: "displayError"
               });

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;

src/shipping/components/ShippingRateZipCodeRangeRemoveDialog/index.ts

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

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}

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";
+ShippingZonePostalCodeRangeDialog.displayName =
-export default ShippingZoneZipCodeRangeDialog;
+  "ShippingZonePostalCodeRangeDialog";
+export default ShippingZonePostalCodeRangeDialog;

src/shipping/components/ShippingZonePostalCodeRangeDialog/index.ts

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

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 { ShippingMethodFragment_postalCodeRules } from "@saleor/fragments/types/ShippingMethodFragment";
-import { FormChange } from "@saleor/hooks/useForm";
 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 {
+export interface ShippingZonePostalCodesProps {
-  Include,
-  Exclude
-}
-
-export interface ShippingZoneZipCodesProps {
-  data: Record<"includeZipCodes", ZipCodeInclusion>;
   disabled: boolean;
   initialExpanded?: boolean;
-  zipCodes: ShippingMethodFragment_zipCodeRules[] | undefined;
+  initialInclusionType?: PostalCodeRuleInclusionTypeEnum;
-  onZipCodeInclusionChange: FormChange;
+  postalCodes: ShippingMethodFragment_postalCodeRules[] | undefined;
-  onZipCodeDelete: (id: string) => void;
+  onPostalCodeInclusionChange: (
-  onZipCodeRangeAdd: () => void;
+    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> = ({
+const ShippingZonePostalCodes: React.FC<ShippingZonePostalCodesProps> = ({
-  data,
   disabled,
-  initialExpanded,
+  initialExpanded = true,
-  zipCodes,
+  initialInclusionType = PostalCodeRuleInclusionTypeEnum.EXCLUDE,
-  onZipCodeDelete,
+  postalCodes,
-  onZipCodeInclusionChange,
+  onPostalCodeDelete,
-  onZipCodeRangeAdd
+  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}
+            onClick={onPostalCodeRangeAdd}
-            data-test="add-zip-code-range"
+            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"
+          name="includePostalCodes"
-          value={data.includeZipCodes}
+          value={getInlcusionType()}
-          onChange={onZipCodeInclusionChange}
+          onChange={onInclusionRadioChange}
         />
       </CardContent>
       <ResponsiveTable>
@@ -145,61 +163,50 @@ const ShippingZoneZipCodes: React.FC<ShippingZoneZipCodesProps> = ({
           <col />
           <col className={classes.colAction} />
         </colgroup>
-        {zipCodes === undefined ||
+        <TableHead>
-          (zipCodes.length > 0 && (
+          <TableRow>
-            <TableHead>
+            <TableCell>
-              <TableRow>
+              {postalCodes === undefined ? (
-                <TableCell>
+                <Skeleton className={classes.skeleton} />
-                  {zipCodes === undefined ? (
+              ) : (
-                    <Skeleton className={classes.skeleton} />
+                <Typography variant="caption">
-                  ) : (
+                  <FormattedMessage
-                    <Typography variant="caption">
+                    defaultMessage="{number} postal code ranges"
-                      <FormattedMessage
+                    description="number of postal code ranges"
-                        defaultMessage="{number} postal code ranges"
+                    values={{
-                        description="number of postal code ranges"
+                      number: postalCodes.length
-                        values={{
+                    }}
-                          number: zipCodes.length
+                  />
-                        }}
+                </Typography>
-                      />
+              )}
-                    </Typography>
+            </TableCell>
-                  )}
+            <TableCell>
-                </TableCell>
+              <IconButton onClick={() => setExpanded(!expanded)}>
-                <TableCell>
+                <ArrowDropdown
-                  <IconButton onClick={() => setExpanded(!expanded)}>
+                  className={classNames(classes.arrow, {
-                    <ArrowDropdown
+                    [classes.arrowRotate]: expanded
-                      className={classNames(classes.arrow, {
+                  })}
-                        [classes.arrowRotate]: expanded
+                />
-                      })}
+              </IconButton>
-                    />
+            </TableCell>
-                  </IconButton>
+          </TableRow>
-                </TableCell>
+        </TableHead>
-              </TableRow>
-            </TableHead>
-          ))}
         {expanded && (
           <TableBody>
             {renderCollection(
-              zipCodes,
+              postalCodes,
-              zipCodeRange => (
+              postalCodeRange => (
-                <TableRow key={zipCodeRange?.id}>
+                <TableRow key={postalCodeRange?.id}>
                   <TableCell>
-                    {zipCodeRange?.start ? (
+                    {getPostalCodeRangeLabel(postalCodeRange)}
-                      zipCodeRange?.end ? (
-                        `${zipCodeRange.start} - ${zipCodeRange.end}`
-                      ) : (
-                        zipCodeRange.start
-                      )
-                    ) : (
-                      <Skeleton />
-                    )}
                   </TableCell>
                   <TableCell>
                     <IconButton
                       disabled={disabled}
                       color="primary"
-                      onClick={() => onZipCodeDelete(zipCodeRange.id)}
+                      onClick={() => onPostalCodeDelete(postalCodeRange)}
-                      data-test="delete-zip-code"
+                      data-test="delete-postal-code"
-                      data-test-id={zipCodeRange?.id}
+                      data-test-id={postalCodeRange?.id}
                     >
                       <DeleteIcon />
                     </IconButton>
@@ -223,8 +230,5 @@ const ShippingZoneZipCodes: React.FC<ShippingZoneZipCodesProps> = ({
   );
 };
 
-ShippingZoneZipCodes.displayName = "ShippingZoneZipCodes";
+ShippingZonePostalCodes.displayName = "ShippingZonePostalCodes";
-ShippingZoneZipCodes.defaultProps = {
+export default ShippingZonePostalCodes;
-  initialExpanded: true
-};
-export default ShippingZoneZipCodes;

src/shipping/components/ShippingZonePostalCodes/index.ts

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

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",
+  postalCodes: [
-  shippingChannels: defaultChannels,
-  variant: ShippingMethodTypeEnum.PRICE,
-  zipCodes: [
     {
-      __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)

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, {
+import ShippingZonePostalCodes from "../ShippingZonePostalCodes";
-  ZipCodeInclusion
-} from "../ShippingZoneZipCodes";
 
 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;
+  onPostalCodeInclusionChange: (
-  onZipCodeUnassign: (id: string) => void;
+    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,
+  onPostalCodeAssign,
-  onZipCodeUnassign,
+  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
+                <ShippingZonePostalCodes
-                  data={data}
                   disabled={disabled}
-                  onZipCodeDelete={onZipCodeUnassign}
+                  onPostalCodeDelete={onPostalCodeUnassign}
-                  onZipCodeInclusionChange={() => undefined}
+                  onPostalCodeInclusionChange={postalCodeInclusionChange}
-                  onZipCodeRangeAdd={onZipCodeAssign}
+                  onPostalCodeRangeAdd={onPostalCodeAssign}
-                  zipCodes={zipCodes}
+                  postalCodes={postalCodes}
                 />
               </div>
               <div>

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",

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, {
+import ShippingZonePostalCodes from "../ShippingZonePostalCodes";
-  ZipCodeInclusion
-} from "../ShippingZoneZipCodes";
 
 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;
+  onPostalCodeInclusionChange: (
-  onZipCodeUnassign: (id: string) => void;
+    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,
+  onPostalCodeAssign,
-  onZipCodeUnassign,
+  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
+                <ShippingZonePostalCodes
-                  data={data}
                   disabled={disabled}
-                  onZipCodeDelete={onZipCodeUnassign}
+                  onPostalCodeDelete={onPostalCodeUnassign}
-                  onZipCodeInclusionChange={() => undefined}
+                  onPostalCodeInclusionChange={postalCodeInclusionChange}
-                  onZipCodeRangeAdd={onZipCodeAssign}
+                  onPostalCodeRangeAdd={onPostalCodeAssign}
-                  zipCodes={rate?.zipCodeRules}
+                  postalCodes={rate?.postalCodeRules}
+                  initialInclusionType={postalCodesInclusionType}
                 />
                 <CardSpacer />
                 <ShippingMethodProducts
@@ -196,9 +212,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
               </div>
             </Grid>
             <SaveButtonBar
-              disabled={
+              disabled={disabled || formDisabled || formIsUnchanged}
-                disabled || formDisabled || (!hasChanged && !hasChannelChanged)
-              }
               onCancel={onBack}
               onDelete={onDelete}
               onSave={submit}

src/shipping/components/ShippingZoneZipCodeRangeDialog/index.ts

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

src/shipping/components/ShippingZoneZipCodes/index.ts

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

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: [],
+      postalCodeRules: [
-      type: ShippingMethodTypeEnum.WEIGHT,
-      zipCodeRules: [
         {
-          __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: [],
+      postalCodeRules: [
-      type: ShippingMethodTypeEnum.WEIGHT,
-      zipCodeRules: [
         {
-          __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: [],
+      postalCodeRules: [
-      type: ShippingMethodTypeEnum.PRICE,
-      zipCodeRules: [
         {
-          __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: [],
+      postalCodeRules: [
-      type: ShippingMethodTypeEnum.PRICE,
-      zipCodeRules: [
         {
-          __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: [

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 ||
+    updateShippingMethodChannelListingOpts.called;
-    assignZipCodeRulesOpts.called;
   const loading =
     createBaseShippingRateOpts.loading ||
-    updateShippingMethodChannelListingOpts.loading ||
+    updateShippingMethodChannelListingOpts.loading;
-    assignZipCodeRulesOpts.loading;
   const errors = [
-    ...(createBaseShippingRateOpts.data?.shippingPriceCreate.errors || []),
+    ...(createBaseShippingRateOpts.data?.shippingPriceCreate.errors || [])
-    ...(assignZipCodeRulesOpts.data?.shippingMethodZipCodeRulesCreate.errors ||
-      [])
   ];
   const channelErrors =
     updateShippingMethodChannelListingOpts.data

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(

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 {
+export interface CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_postalCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+  __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 {
+export interface CreateShippingRate_shippingPriceCreate_shippingMethod_postalCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+  __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;

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 {
+export interface DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_postalCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+  __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;

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 {
+export interface ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_postalCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+  __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;

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;
-}

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;
-}

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 {
+export interface ShippingZone_shippingZone_shippingMethods_postalCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+  __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;

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 {
+export interface UpdateShippingRate_shippingPriceUpdate_shippingMethod_postalCodeRules {
-  __typename: "ShippingMethodZipCodeRule";
+  __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;

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<
+  const [postalCodes, setPostalCodes] = React.useState([]);
-    ShippingMethodFragment_zipCodeRules[]
+  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) => {
+  const handlePostalCodeRangeAdd = (data: MinMax) => {
-    setZipCodes(zipCodes => [
+    setPostalCodes(postalCodes => [
-      ...zipCodes,
+      ...postalCodes,
       {
-        __typename: "ShippingMethodZipCodeRule",
         end: data.max,
-        id: zipCodes.length.toString(),
         start: data.min
       }
     ]);
     closeModal();
   };
-  const handleZipCodeRangeDelete = (id: string) => {
+
-    setZipCodes(zipCodes =>
+  const onPostalCodeInclusionChange = (
-      remove(
+    inclusion: PostalCodeRuleInclusionTypeEnum
-        zipCodes.find(zipCode => zipCode.id === id),
+  ) => {
-        zipCodes,
+    setRadioInclusionType(inclusion);
-        (a, b) => a.id === b.id
+    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")}
+        onPostalCodeAssign={() => openModal("add-range")}
-        onZipCodeUnassign={id =>
+        onPostalCodeUnassign={onPostalCodeUnassign}
-          openModal("remove-range", {
+        onPostalCodeInclusionChange={onPostalCodeInclusionChange}
-            id
-          })
-        }
         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"}
-      />
     </>
   );
 };

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")}
+        onPostalCodeInclusionChange={onPostalCodeInclusionChange}
-        onZipCodeUnassign={id =>
+        onPostalCodeAssign={() => openModal("add-range")}
-          openModal("remove-range", {
+        onPostalCodeUnassign={onPostalCodeUnassign}
-            id
-          })
-        }
       />
-      <ShippingZoneZipCodeRangeDialog
+      <ShippingZonePostalCodeRangeDialog
-        confirmButtonState={assignZipCodeRangeOpts.status}
+        confirmButtonState={"default"}
         onClose={closeModal}
-        onSubmit={data =>
+        onSubmit={code => {
-          assignZipCodeRange({
+          onPostalCodeAssign(code);
-            variables: {
+          setHavePostalCodesChanged(true);
-              id: rateId,
+        }}
-              input: {
-                zipCodeRules: [
-                  {
-                    end: data.max || null,
-                    start: data.min
-                  }
-                ]
-              }
-            }
-          })
-        }
         open={params.action === "add-range"}
       />
-      <ShippingRateZipCodeRangeRemoveDialog
-        confirmButtonState={unassignZipCodeRangeOpts.status}
-        onClose={closeModal}
-        onConfirm={() =>
-          unassignZipCodeRange({
-            variables: {
-              id: params.id
-            }
-          })
-        }
-        open={params.action === "remove-range"}
-      />
     </>
   );
 };

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<
+  const [postalCodes, setPostalCodes] = React.useState([]);
-    ShippingMethodFragment_zipCodeRules[]
+  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) => {
+  const handlePostalCodeRangeAdd = (data: MinMax) => {
-    setZipCodes(zipCodes => [
+    setPostalCodes(postalCodes => [
-      ...zipCodes,
+      ...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 =>
+  const onPostalCodeInclusionChange = (
-      remove(
+    inclusion: PostalCodeRuleInclusionTypeEnum
-        zipCodes.find(zipCode => zipCode.id === id),
+  ) => {
-        zipCodes,
+    setRadioInclusionType(inclusion);
-        (a, b) => a.id === b.id
+    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")}
+        onPostalCodeAssign={() => openModal("add-range")}
-        onZipCodeUnassign={id =>
+        onPostalCodeUnassign={onPostalCodeUnassign}
-          openModal("remove-range", {
+        onPostalCodeInclusionChange={onPostalCodeInclusionChange}
-            id
-          })
-        }
         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"}
-      />
     </>
   );
 };

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")}
+        onPostalCodeInclusionChange={onPostalCodeInclusionChange}
-        onZipCodeUnassign={id =>
+        onPostalCodeAssign={() => openModal("add-range")}
-          openModal("remove-range", {
+        onPostalCodeUnassign={onPostalCodeUnassign}
-            id
-          })
-        }
       />
-      <ShippingZoneZipCodeRangeDialog
+      <ShippingZonePostalCodeRangeDialog
-        confirmButtonState={assignZipCodeRangeOpts.status}
+        confirmButtonState={"default"}
         onClose={closeModal}
-        onSubmit={data =>
+        onSubmit={code => {
-          assignZipCodeRange({
+          onPostalCodeAssign(code);
-            variables: {
+          setHavePostalCodesChanged(true);
-              id: rateId,
+        }}
-              input: {
-                zipCodeRules: [
-                  {
-                    end: data.max || null,
-                    start: data.min
-                  }
-                ]
-              }
-            }
-          })
-        }
         open={params.action === "add-range"}
       />
-      <ShippingRateZipCodeRangeRemoveDialog
-        confirmButtonState={unassignZipCodeRangeOpts.status}
-        onClose={closeModal}
-        onConfirm={() =>
-          unassignZipCodeRange({
-            variables: {
-              id: params.id
-            }
-          })
-        }
-        open={params.action === "remove-range"}
-      />
     </>
   );
 };

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;

src/types/globalTypes.ts

@@ -757,6 +757,11 @@ export enum PluginSortField {
   NAME = "NAME",
 }
 
+export enum PostalCodeRuleInclusionTypeEnum {
+  EXCLUDE = "EXCLUDE",
+  INCLUDE = "INCLUDE",
+}
+
 export enum ProductAttributeType {
   PRODUCT = "PRODUCT",
   VARIANT = "VARIANT",
@@ -1720,6 +1725,11 @@ export interface ShippingMethodChannelListingInput {
   removeChannels?: string[] | null;
 }
 
+export interface ShippingPostalCodeRulesCreateInputRange {
+  start: string;
+  end?: string | null;
+}
+
 export interface ShippingPriceExcludeProductsInput {
   products: (string | null)[];
 }
@@ -1732,15 +1742,9 @@ export interface ShippingPriceInput {
   minimumDeliveryDays?: number | null;
   type?: ShippingMethodTypeEnum | null;
   shippingZone?: string | null;
-}
+  addPostalCodeRules?: ShippingPostalCodeRulesCreateInputRange[] | null;
-
+  deletePostalCodeRules?: string[] | null;
-export interface ShippingZipCodeRulesCreateInput {
+  inclusionType?: PostalCodeRuleInclusionTypeEnum | null;
-  zipCodeRules: (ShippingZipCodeRulesCreateInputRange | null)[];
-}
-
-export interface ShippingZipCodeRulesCreateInputRange {
-  start: string;
-  end?: string | null;
 }
 
 export interface ShippingZoneCreateInput {

src/webhooks/components/WebhookEvents/WebhookEvents.tsx

@@ -80,6 +80,18 @@ const WebhookEvents: React.FC<WebhookEventsProps> = ({
       defaultMessage: "Order updated",
       description: "event"
     }),
+    [WebhookEventTypeEnum.PAGE_CREATED]: intl.formatMessage({
+      defaultMessage: "Page created",
+      description: "event"
+    }),
+    [WebhookEventTypeEnum.PAGE_DELETED]: intl.formatMessage({
+      defaultMessage: "Page deleted",
+      description: "event"
+    }),
+    [WebhookEventTypeEnum.PAGE_UPDATED]: intl.formatMessage({
+      defaultMessage: "Page updated",
+      description: "event"
+    }),
     [WebhookEventTypeEnum.PRODUCT_CREATED]: intl.formatMessage({
       defaultMessage: "Product created",
       description: "event"