Saleor 4626/fix shipping zone rate UI (#1511)

* Fix shipping zone rates ui

* Update tests and messages

locale/defaultMessages.json

@@ -6731,6 +6731,10 @@
     "context": "max price in channel",
     "string": "Max. value"
   },
+  "src_dot_shipping_dot_components_dot_OrderValue_dot_1064401942": {
+    "context": "price rates info",
+    "string": "This rate will apply to all orders"
+  },
   "src_dot_shipping_dot_components_dot_OrderValue_dot_1449127001": {
     "string": "Min Value"
   },
@@ -6742,9 +6746,9 @@
     "context": "card title",
     "string": "Order Value"
   },
-  "src_dot_shipping_dot_components_dot_OrderValue_dot_4226393146": {
+  "src_dot_shipping_dot_components_dot_OrderValue_dot_491724403": {
-    "context": "price rates info",
+    "context": "checkbox label",
-    "string": "This rate will apply to all orders of all prices"
+    "string": "Restrict order value"
   },
   "src_dot_shipping_dot_components_dot_OrderValue_dot_507892781": {
     "context": "channel name",
@@ -6757,14 +6761,14 @@
     "context": "min price in channel",
     "string": "Min. value"
   },
-  "src_dot_shipping_dot_components_dot_OrderValue_dot_882649212": {
-    "context": "checkbox label",
-    "string": "There are no value limits"
-  },
   "src_dot_shipping_dot_components_dot_OrderWeight_dot_1064401942": {
     "context": "info text",
     "string": "This rate will apply to all orders"
   },
+  "src_dot_shipping_dot_components_dot_OrderWeight_dot_1648082334": {
+    "context": "checkbox label",
+    "string": "Restrict order weight"
+  },
   "src_dot_shipping_dot_components_dot_OrderWeight_dot_2211490913": {
     "context": "card title",
     "string": "Order Weight"
@@ -6772,10 +6776,6 @@
   "src_dot_shipping_dot_components_dot_OrderWeight_dot_2935375344": {
     "string": "Min. Order Weight"
   },
-  "src_dot_shipping_dot_components_dot_OrderWeight_dot_882649212": {
-    "context": "checkbox label",
-    "string": "There are no value limits"
-  },
   "src_dot_shipping_dot_components_dot_OrderWeight_dot_959089677": {
     "string": "Max. Order Weight"
   },

src/shipping/components/OrderValue/OrderValue.stories.tsx

@@ -12,7 +12,7 @@ const props: OrderValueProps = {
   ),
   disabled: false,
   errors: [],
-  noLimits: false,
+  orderValueRestricted: true,
   onChange: () => undefined,
   onChannelsChange: () => undefined
 };

src/shipping/components/OrderValue/OrderValue.tsx

@@ -1,11 +1,11 @@
 import {
   Card,
-  CardContent,
   TableBody,
   TableCell,
   TableRow,
   Typography
 } from "@material-ui/core";
+import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
 import { ChannelShippingData } from "@saleor/channels/utils";
 import CardTitle from "@saleor/components/CardTitle";
 import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
@@ -32,7 +32,7 @@ export interface OrderValueProps {
   channels: ChannelShippingData[];
   errors: ShippingChannelsErrorFragment[];
   disabled: boolean;
-  noLimits: boolean;
+  orderValueRestricted: boolean;
   onChange: (event: ChangeEvent) => void;
   onChannelsChange: (channelId: string, value: Value) => void;
 }
@@ -42,7 +42,7 @@ const numberOfColumns = 3;
 export const OrderValue: React.FC<OrderValueProps> = ({
   channels,
   errors,
-  noLimits,
+  orderValueRestricted,
   disabled,
   onChannelsChange,
   onChange
@@ -62,37 +62,36 @@ export const OrderValue: React.FC<OrderValueProps> = ({
           description: "card title"
         })}
       />
-      <CardContent className={classes.content}>
+      <div className={classes.content}>
         <div className={classes.subheader}>
           <ControlledCheckbox
-            name="noLimits"
+            name="orderValueRestricted"
             label={
               <>
                 <FormattedMessage
-                  defaultMessage="There are no value limits"
+                  defaultMessage="Restrict order value"
                   description="checkbox label"
                 />
-                <Typography variant="caption" className={classes.caption}>
+                <Typography variant="caption">
                   {intl.formatMessage({
-                    defaultMessage:
+                    defaultMessage: "This rate will apply to all orders",
-                      "This rate will apply to all orders of all prices",
                     description: "price rates info"
                   })}
                 </Typography>
               </>
             }
-            checked={noLimits}
+            checked={orderValueRestricted}
             onChange={onChange}
             disabled={disabled}
           />
-          <Typography variant="caption" className={classes.info}>
+          <VerticalSpacer />
           <FormattedMessage
             defaultMessage="Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency"
             description="channels discount info"
           />
-          </Typography>
+          <VerticalSpacer />
         </div>
-        {!noLimits && (
+        {orderValueRestricted && (
           <ResponsiveTable className={classes.table}>
             <TableHead colSpan={numberOfColumns} disabled={disabled} items={[]}>
               <TableCell className={classes.colName}>
@@ -185,7 +184,7 @@ export const OrderValue: React.FC<OrderValueProps> = ({
             </TableBody>
           </ResponsiveTable>
         )}
-      </CardContent>
+      </div>
     </Card>
   );
 };

src/shipping/components/OrderValue/styles.ts

@@ -2,9 +2,6 @@ import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
   theme => ({
-    caption: {
-      marginBottom: theme.spacing(2)
-    },
     colName: {
       fontSize: 14,
       paddingLeft: 0,
@@ -16,11 +13,7 @@ export const useStyles = makeStyles(
       width: 200
     },
     content: {
-      "&:last-child": {
+      padding: theme.spacing(3, 0, 3, 0)
-        paddingBottom: 0
-      },
-      paddingLeft: 0,
-      paddingRight: 0
     },
     info: {
       fontSize: 14
@@ -29,7 +22,7 @@ export const useStyles = makeStyles(
       verticalAlign: "top"
     },
     subheader: {
-      padding: theme.spacing(0, 3, 2, 3)
+      padding: theme.spacing(0, 3, 0, 3)
     },
     table: {
       tableLayout: "fixed"

src/shipping/components/OrderWeight/OrderWeight.stories.tsx

@@ -10,7 +10,7 @@ const props: OrderWeightProps = {
   errors: [],
   maxValue: "2",
   minValue: "1",
-  noLimits: false,
+  orderValueRestricted: true,
   onChange: () => undefined
 };
 

src/shipping/components/OrderWeight/OrderWeight.tsx

@@ -1,8 +1,16 @@
-import { Card, CardContent, TextField, Typography } from "@material-ui/core";
+import {
+  Card,
+  CardContent,
+  InputAdornment,
+  TextField,
+  Typography
+} from "@material-ui/core";
+import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment";
 import { ChangeEvent } from "@saleor/hooks/useForm";
+import useShop from "@saleor/hooks/useShop";
 import { getShippingWeightRateErrorMessage } from "@saleor/shipping/errors";
 import { getFormErrors } from "@saleor/utils/errors";
 import React from "react";
@@ -13,14 +21,14 @@ import { useStyles } from "./styles";
 export interface OrderWeightProps {
   disabled: boolean;
   errors: ShippingErrorFragment[];
-  noLimits: boolean;
+  orderValueRestricted: boolean;
   maxValue: string;
   minValue: string;
   onChange: (event: ChangeEvent) => void;
 }
 
 export const OrderWeight: React.FC<OrderWeightProps> = ({
-  noLimits,
+  orderValueRestricted,
   disabled,
   errors,
   maxValue = "",
@@ -29,6 +37,7 @@ export const OrderWeight: React.FC<OrderWeightProps> = ({
 }) => {
   const classes = useStyles({});
   const intl = useIntl();
+  const shop = useShop();
 
   const formFields = ["minimumOrderWeight", "maximumOrderWeight"];
   const formErrors = getFormErrors(formFields, errors);
@@ -43,14 +52,14 @@ export const OrderWeight: React.FC<OrderWeightProps> = ({
       />
       <CardContent>
         <ControlledCheckbox
-          name="noLimits"
+          name="orderValueRestricted"
           label={
             <>
               <FormattedMessage
-                defaultMessage="There are no value limits"
+                defaultMessage="Restrict order weight"
                 description="checkbox label"
               />
-              <Typography variant="caption" className={classes.caption}>
+              <Typography variant="caption">
                 <FormattedMessage
                   defaultMessage="This rate will apply to all orders"
                   description="info text"
@@ -58,12 +67,13 @@ export const OrderWeight: React.FC<OrderWeightProps> = ({
               </Typography>
             </>
           }
-          checked={noLimits}
+          checked={orderValueRestricted}
           onChange={onChange}
           disabled={disabled}
         />
-
+        {orderValueRestricted && (
-        {!noLimits && (
+          <>
+            <VerticalSpacer spacing={2} />
             <div className={classes.grid}>
               <TextField
                 disabled={disabled}
@@ -82,7 +92,14 @@ export const OrderWeight: React.FC<OrderWeightProps> = ({
                   min: 0,
                   type: "number"
                 }}
-              InputProps={{ inputProps: { min: 0 } }}
+                InputProps={{
+                  inputProps: { min: 0 },
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <Typography>{shop?.defaultWeightUnit}</Typography>
+                    </InputAdornment>
+                  )
+                }}
                 value={minValue}
                 onChange={onChange}
               />
@@ -99,11 +116,19 @@ export const OrderWeight: React.FC<OrderWeightProps> = ({
                 })}
                 name="maxValue"
                 type="number"
-              InputProps={{ inputProps: { min: minValue } }}
+                InputProps={{
+                  inputProps: { min: minValue },
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <Typography>{shop?.defaultWeightUnit}</Typography>
+                    </InputAdornment>
+                  )
+                }}
                 value={maxValue}
                 onChange={onChange}
               />
             </div>
+          </>
         )}
       </CardContent>
     </Card>

src/shipping/components/OrderWeight/styles.ts

@@ -2,9 +2,6 @@ import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
   theme => ({
-    caption: {
-      marginBottom: theme.spacing(2)
-    },
     grid: {
       display: "grid",
       gridColumnGap: theme.spacing(2),

src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx

@@ -27,18 +27,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import ShippingZonePostalCodes from "../ShippingZonePostalCodes";
-
+import { ShippingZoneRateCommonFormData } from "../ShippingZoneRatesPage/types";
-export interface FormData {
-  channelListings: ChannelShippingData[];
-  name: string;
-  description: OutputData;
-  noLimits: boolean;
-  minValue: string;
-  maxValue: string;
-  minDays: string;
-  maxDays: string;
-  type: ShippingMethodTypeEnum;
-}
 
 export interface ShippingZoneRatesCreatePageProps {
   allChannelsCount?: number;
@@ -51,7 +40,7 @@ export interface ShippingZoneRatesCreatePageProps {
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;
   onDelete?: () => void;
-  onSubmit: (data: FormData) => void;
+  onSubmit: (data: ShippingZoneRateCommonFormData) => void;
   onPostalCodeInclusionChange: (
     inclusion: PostalCodeRuleInclusionTypeEnum
   ) => void;
@@ -83,7 +72,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
 }) => {
   const intl = useIntl();
   const isPriceVariant = variant === ShippingMethodTypeEnum.PRICE;
-  const initialForm: FormData = {
+  const initialForm: ShippingZoneRateCommonFormData = {
     channelListings: shippingChannels,
     maxDays: "",
     maxValue: "",
@@ -91,7 +80,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
     minValue: "",
     name: "",
     description: null,
-    noLimits: false,
+    orderValueRestricted: true,
     type: null
   };
 
@@ -143,14 +132,14 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
                   <OrderValue
                     channels={data.channelListings}
                     errors={channelErrors}
-                    noLimits={data.noLimits}
+                    orderValueRestricted={data.orderValueRestricted}
                     disabled={disabled}
                     onChange={change}
                     onChannelsChange={handleChannelsChange}
                   />
                 ) : (
                   <OrderWeight
-                    noLimits={data.noLimits}
+                    orderValueRestricted={data.orderValueRestricted}
                     disabled={disabled}
                     minValue={data.minValue}
                     maxValue={data.maxValue}

src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx

@@ -7,7 +7,6 @@ import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
 import Metadata from "@saleor/components/Metadata/Metadata";
-import { MetadataFormData } from "@saleor/components/Metadata/types";
 import PageHeader from "@saleor/components/PageHeader";
 import Savebar from "@saleor/components/Savebar";
 import { ShippingChannelsErrorFragment } from "@saleor/fragments/types/ShippingChannelsErrorFragment";
@@ -37,18 +36,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import ShippingZonePostalCodes from "../ShippingZonePostalCodes";
-
+import { ShippingZoneRateUpdateFormData } from "./types";
-export interface FormData extends MetadataFormData {
-  channelListings: ChannelShippingData[];
-  name: string;
-  description: OutputData;
-  noLimits: boolean;
-  minValue: string;
-  maxValue: string;
-  minDays: string;
-  maxDays: string;
-  type: ShippingMethodTypeEnum;
-}
 
 export interface ShippingZoneRatesPageProps
   extends Pick<ListProps, Exclude<keyof ListProps, "onRowClick">>,
@@ -65,7 +53,7 @@ export interface ShippingZoneRatesPageProps
   postalCodeRules: ShippingZone_shippingZone_shippingMethods_postalCodeRules[];
   onBack: () => void;
   onDelete?: () => void;
-  onSubmit: (data: FormData) => void;
+  onSubmit: (data: ShippingZoneRateUpdateFormData) => void;
   onPostalCodeInclusionChange: (
     inclusion: PostalCodeRuleInclusionTypeEnum
   ) => void;
@@ -103,7 +91,8 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
   ...listProps
 }) => {
   const isPriceVariant = variant === ShippingMethodTypeEnum.PRICE;
-  const initialForm: FormData = {
+
+  const initialForm: ShippingZoneRateUpdateFormData = {
     channelListings: shippingChannels,
     maxDays: rate?.maximumDeliveryDays?.toString() || "",
     maxValue: rate?.maximumOrderWeight?.value.toString() || "",
@@ -112,7 +101,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
     minValue: rate?.minimumOrderWeight?.value.toString() || "",
     name: rate?.name || "",
     description: rate?.description && JSON.parse(rate.description),
-    noLimits: false,
+    orderValueRestricted: !!rate?.channelListings.length,
     privateMetadata: rate?.privateMetadata.map(mapMetadataItemToInput),
     type: rate?.type || null
   };
@@ -161,14 +150,14 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
                   <OrderValue
                     channels={data.channelListings}
                     errors={channelErrors}
-                    noLimits={data.noLimits}
+                    orderValueRestricted={data.orderValueRestricted}
                     disabled={disabled}
                     onChange={change}
                     onChannelsChange={handleChannelsChange}
                   />
                 ) : (
                   <OrderWeight
-                    noLimits={data.noLimits}
+                    orderValueRestricted={data.orderValueRestricted}
                     disabled={disabled}
                     minValue={data.minValue}
                     maxValue={data.maxValue}

src/shipping/components/ShippingZoneRatesPage/types.ts

@@ -0,0 +1,19 @@
+import { OutputData } from "@editorjs/editorjs";
+import { ChannelShippingData } from "@saleor/channels/utils";
+import { MetadataFormData } from "@saleor/components/Metadata";
+import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
+
+export interface ShippingZoneRateCommonFormData {
+  channelListings: ChannelShippingData[];
+  name: string;
+  description: OutputData;
+  orderValueRestricted: boolean;
+  minValue: string;
+  maxValue: string;
+  minDays: string;
+  maxDays: string;
+  type: ShippingMethodTypeEnum;
+}
+
+export type ShippingZoneRateUpdateFormData = ShippingZoneRateCommonFormData &
+  MetadataFormData;

src/shipping/handlers.ts

@@ -4,7 +4,6 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
 import { getMutationErrors, getMutationState } from "@saleor/misc";
-import { FormData as ShippingZoneRatesPageFormData } from "@saleor/shipping/components/ShippingZoneRatesPage";
 import { CreateShippingRateVariables } from "@saleor/shipping/types/CreateShippingRate";
 import { ShippingMethodChannelListingUpdateVariables } from "@saleor/shipping/types/ShippingMethodChannelListingUpdate";
 import { UpdateShippingRateVariables } from "@saleor/shipping/types/UpdateShippingRate";
@@ -17,6 +16,7 @@ import { getParsedDataForJsonStringField } from "@saleor/utils/richText/misc";
 import differenceBy from "lodash/differenceBy";
 import { useIntl } from "react-intl";
 
+import { ShippingZoneRateCommonFormData } from "./components/ShippingZoneRatesPage/types";
 import {
   useShippingMethodChannelListingUpdate,
   useShippingRateCreate,
@@ -61,7 +61,7 @@ const getPostalCodeRulesToAdd = (
     );
 
 export function getCreateShippingPriceRateVariables(
-  data: ShippingZoneRatesPageFormData,
+  data: ShippingZoneRateCommonFormData,
   id: string,
   addPostalCodeRules: ShippingMethodFragment_postalCodeRules[],
   inclusionType: PostalCodeRuleInclusionTypeEnum
@@ -84,7 +84,7 @@ export function getCreateShippingPriceRateVariables(
 }
 
 export function getCreateShippingWeightRateVariables(
-  data: ShippingZoneRatesPageFormData,
+  data: ShippingZoneRateCommonFormData,
   id: string,
   addPostalCodeRules: ShippingMethodFragment_postalCodeRules[],
   inclusionType: PostalCodeRuleInclusionTypeEnum
@@ -93,7 +93,7 @@ export function getCreateShippingWeightRateVariables(
   const parsedMaxValue = parseFloat(data.maxValue);
   const parsedMinDays = parseInt(data.minDays, 10);
   const parsedMaxDays = parseInt(data.maxDays, 10);
-  const isWeightSet = !data.noLimits;
+  const isWeightSet = data.orderValueRestricted;
   const postalCodeRules = getPostalCodeRulesToAdd(addPostalCodeRules);
   return {
     input: {
@@ -112,7 +112,7 @@ export function getCreateShippingWeightRateVariables(
 }
 
 export function getUpdateShippingPriceRateVariables(
-  data: ShippingZoneRatesPageFormData,
+  data: ShippingZoneRateCommonFormData,
   id: string,
   rateId: string,
   addPostalCodeRules: ShippingMethodFragment_postalCodeRules[],
@@ -140,7 +140,7 @@ export function getUpdateShippingPriceRateVariables(
 }
 
 export function getUpdateShippingWeightRateVariables(
-  data: ShippingZoneRatesPageFormData,
+  data: ShippingZoneRateCommonFormData,
   id: string,
   rateId: string,
   addPostalCodeRules: ShippingMethodFragment_postalCodeRules[],
@@ -150,7 +150,7 @@ export function getUpdateShippingWeightRateVariables(
   const parsedMaxValue = parseFloat(data.maxValue);
   const parsedMinDays = parseInt(data.minDays, 10);
   const parsedMaxDays = parseInt(data.maxDays, 10);
-  const isWeightSet = !data.noLimits;
+  const isWeightSet = data.orderValueRestricted;
   const postalCodeRules = getPostalCodeRulesToAdd(addPostalCodeRules);
   return {
     id: rateId,
@@ -173,7 +173,7 @@ export function getUpdateShippingWeightRateVariables(
 }
 export function getShippingMethodChannelVariables(
   id: string,
-  noLimits: boolean,
+  orderValueRestricted: boolean,
   formChannels: ChannelShippingData[],
   prevChannels?: ChannelShippingData[]
 ): ShippingMethodChannelListingUpdateVariables {
@@ -188,9 +188,9 @@ export function getShippingMethodChannelVariables(
         formChannels?.map(channel => ({
           channelId: channel.id,
           maximumOrderPrice:
-            channel.maxValue && !noLimits ? channel.maxValue : null,
+            channel.maxValue && orderValueRestricted ? channel.maxValue : null,
           minimumOrderPrice:
-            channel.minValue && !noLimits ? channel.minValue : null,
+            channel.minValue && orderValueRestricted ? channel.minValue : null,
           price: channel.price || null
         })) || [],
       removeChannels
@@ -226,7 +226,7 @@ export function useShippingRateCreator(
       ? shippingPriceRatesEditUrl
       : shippingWeightRatesEditUrl;
 
-  const createShippingRate = async (data: ShippingZoneRatesPageFormData) => {
+  const createShippingRate = async (data: ShippingZoneRateCommonFormData) => {
     const response = await createBaseShippingRate({
       variables: getVariables(data, shippingZoneId, postalCodes, inclusionType)
     });
@@ -239,7 +239,7 @@ export function useShippingRateCreator(
         updateShippingMethodChannelListing({
           variables: getShippingMethodChannelVariables(
             rateId,
-            data.noLimits,
+            data.orderValueRestricted,
             data.channelListings
           )
         })

src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx

@@ -24,9 +24,8 @@ import useProductSearch from "@saleor/searches/useProductSearch";
 import DeleteShippingRateDialog from "@saleor/shipping/components/DeleteShippingRateDialog";
 import ShippingMethodProductsAddDialog from "@saleor/shipping/components/ShippingMethodProductsAddDialog";
 import ShippingZonePostalCodeRangeDialog from "@saleor/shipping/components/ShippingZonePostalCodeRangeDialog";
-import ShippingZoneRatesPage, {
+import ShippingZoneRatesPage from "@saleor/shipping/components/ShippingZoneRatesPage";
-  FormData
+import { ShippingZoneRateUpdateFormData } from "@saleor/shipping/components/ShippingZoneRatesPage/types";
-} from "@saleor/shipping/components/ShippingZoneRatesPage";
 import UnassignDialog from "@saleor/shipping/components/UnassignDialog";
 import {
   getShippingMethodChannelVariables,
@@ -211,7 +210,9 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
     });
   };
 
-  const updateData = async (formData: FormData): Promise<unknown[]> => {
+  const updateData = async (
+    formData: ShippingZoneRateUpdateFormData
+  ): Promise<unknown[]> => {
     const response = await updateShippingRate({
       variables: getUpdateShippingPriceRateVariables(
         formData,
@@ -229,7 +230,7 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
       updateShippingMethodChannelListing({
         variables: getShippingMethodChannelVariables(
           rateId,
-          formData.noLimits,
+          formData.orderValueRestricted,
           formData.channelListings,
           shippingChannels
         )

src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx

@@ -24,9 +24,8 @@ import useProductSearch from "@saleor/searches/useProductSearch";
 import DeleteShippingRateDialog from "@saleor/shipping/components/DeleteShippingRateDialog";
 import ShippingMethodProductsAddDialog from "@saleor/shipping/components/ShippingMethodProductsAddDialog";
 import ShippingZonePostalCodeRangeDialog from "@saleor/shipping/components/ShippingZonePostalCodeRangeDialog";
-import ShippingZoneRatesPage, {
+import ShippingZoneRatesPage from "@saleor/shipping/components/ShippingZoneRatesPage";
-  FormData
+import { ShippingZoneRateUpdateFormData } from "@saleor/shipping/components/ShippingZoneRatesPage/types";
-} from "@saleor/shipping/components/ShippingZoneRatesPage";
 import UnassignDialog from "@saleor/shipping/components/UnassignDialog";
 import {
   getShippingMethodChannelVariables,
@@ -233,7 +232,7 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
   const [updateMetadata] = useMetadataUpdate({});
   const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
-  const updateData = async (data: FormData) => {
+  const updateData = async (data: ShippingZoneRateUpdateFormData) => {
     const response = await updateShippingRate({
       variables: getUpdateShippingWeightRateVariables(
         data,
@@ -250,7 +249,7 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
       updateShippingMethodChannelListing({
         variables: getShippingMethodChannelVariables(
           rateId,
-          data.noLimits,
+          data.orderValueRestricted,
           data.channelListings,
           shippingChannels
         )