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

* Fix shipping zone rates ui * Update tests and messages
2021-10-18 11:57:53 +03:00 · 2021-10-18 11:57:53 +03:00 · 314b043afa
commit 314b043afa
parent 974f2a06a7
14 changed files with 441 additions and 696 deletions
--- a/locale/defaultMessages.json
+++ b/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": {
-    "context": "price rates info",
-    "string": "This rate will apply to all orders of all prices"
+  "src_dot_shipping_dot_components_dot_OrderValue_dot_491724403": {
+    "context": "checkbox label",
+    "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"
  },
--- a/src/shipping/components/OrderValue/OrderValue.stories.tsx
+++ b/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
 };
--- a/src/shipping/components/OrderValue/OrderValue.tsx
+++ b/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:
-                      "This rate will apply to all orders of all prices",
+                    defaultMessage: "This rate will apply to all orders",
                    description: "price rates info"
                  })}
                </Typography>
              </>
            }
-            checked={noLimits}
+            checked={orderValueRestricted}
            onChange={onChange}
            disabled={disabled}
          />
-          <Typography variant="caption" className={classes.info}>
-            <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 />
+          <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"
+          />
+          <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>
  );
 };
--- a/src/shipping/components/OrderValue/styles.ts
+++ b/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": {
-        paddingBottom: 0
-      },
-      paddingLeft: 0,
-      paddingRight: 0
+      padding: theme.spacing(3, 0, 3, 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"
--- a/src/shipping/components/OrderWeight/OrderWeight.stories.tsx
+++ b/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
 };

--- a/src/shipping/components/OrderWeight/OrderWeight.tsx
+++ b/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,52 +67,68 @@ export const OrderWeight: React.FC<OrderWeightProps> = ({
              </Typography>
            </>
          }
-          checked={noLimits}
+          checked={orderValueRestricted}
          onChange={onChange}
          disabled={disabled}
        />
-
-        {!noLimits && (
-          <div className={classes.grid}>
-            <TextField
-              disabled={disabled}
-              helperText={getShippingWeightRateErrorMessage(
-                formErrors.minimumOrderWeight,
-                intl
-              )}
-              error={!!formErrors.minimumOrderWeight}
-              fullWidth
-              label={intl.formatMessage({
-                defaultMessage: "Min. Order Weight"
-              })}
-              name="minValue"
-              type="number"
-              inputProps={{
-                min: 0,
-                type: "number"
-              }}
-              InputProps={{ inputProps: { min: 0 } }}
-              value={minValue}
-              onChange={onChange}
-            />
-            <TextField
-              disabled={disabled}
-              helperText={getShippingWeightRateErrorMessage(
-                formErrors.maximumOrderWeight,
-                intl
-              )}
-              error={!!formErrors.maximumOrderWeight}
-              fullWidth
-              label={intl.formatMessage({
-                defaultMessage: "Max. Order Weight"
-              })}
-              name="maxValue"
-              type="number"
-              InputProps={{ inputProps: { min: minValue } }}
-              value={maxValue}
-              onChange={onChange}
-            />
-          </div>
+        {orderValueRestricted && (
+          <>
+            <VerticalSpacer spacing={2} />
+            <div className={classes.grid}>
+              <TextField
+                disabled={disabled}
+                helperText={getShippingWeightRateErrorMessage(
+                  formErrors.minimumOrderWeight,
+                  intl
+                )}
+                error={!!formErrors.minimumOrderWeight}
+                fullWidth
+                label={intl.formatMessage({
+                  defaultMessage: "Min. Order Weight"
+                })}
+                name="minValue"
+                type="number"
+                inputProps={{
+                  min: 0,
+                  type: "number"
+                }}
+                InputProps={{
+                  inputProps: { min: 0 },
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <Typography>{shop?.defaultWeightUnit}</Typography>
+                    </InputAdornment>
+                  )
+                }}
+                value={minValue}
+                onChange={onChange}
+              />
+              <TextField
+                disabled={disabled}
+                helperText={getShippingWeightRateErrorMessage(
+                  formErrors.maximumOrderWeight,
+                  intl
+                )}
+                error={!!formErrors.maximumOrderWeight}
+                fullWidth
+                label={intl.formatMessage({
+                  defaultMessage: "Max. Order Weight"
+                })}
+                name="maxValue"
+                type="number"
+                InputProps={{
+                  inputProps: { min: minValue },
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <Typography>{shop?.defaultWeightUnit}</Typography>
+                    </InputAdornment>
+                  )
+                }}
+                value={maxValue}
+                onChange={onChange}
+              />
+            </div>
+          </>
        )}
      </CardContent>
    </Card>
--- a/src/shipping/components/OrderWeight/styles.ts
+++ b/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),
--- a/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx
+++ b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx
@ -27,18 +27,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

 import ShippingZonePostalCodes from "../ShippingZonePostalCodes";
-
-export interface FormData {
-  channelListings: ChannelShippingData[];
-  name: string;
-  description: OutputData;
-  noLimits: boolean;
-  minValue: string;
-  maxValue: string;
-  minDays: string;
-  maxDays: string;
-  type: ShippingMethodTypeEnum;
-}
+import { ShippingZoneRateCommonFormData } from "../ShippingZoneRatesPage/types";

 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}
--- a/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx
+++ b/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";
-
-export interface FormData extends MetadataFormData {
-  channelListings: ChannelShippingData[];
-  name: string;
-  description: OutputData;
-  noLimits: boolean;
-  minValue: string;
-  maxValue: string;
-  minDays: string;
-  maxDays: string;
-  type: ShippingMethodTypeEnum;
-}
+import { ShippingZoneRateUpdateFormData } from "./types";

 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}
--- a/src/shipping/components/ShippingZoneRatesPage/types.ts
+++ b/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;
--- a/src/shipping/handlers.ts
+++ b/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
          )
        })
--- a/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx
+++ b/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, {
-  FormData
-} from "@saleor/shipping/components/ShippingZoneRatesPage";
+import ShippingZoneRatesPage from "@saleor/shipping/components/ShippingZoneRatesPage";
+import { ShippingZoneRateUpdateFormData } from "@saleor/shipping/components/ShippingZoneRatesPage/types";
 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
        )
--- a/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx
+++ b/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, {
-  FormData
-} from "@saleor/shipping/components/ShippingZoneRatesPage";
+import ShippingZoneRatesPage from "@saleor/shipping/components/ShippingZoneRatesPage";
+import { ShippingZoneRateUpdateFormData } from "@saleor/shipping/components/ShippingZoneRatesPage/types";
 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
        )
--- a/src/storybook/snapshots/Stories.test.ts.snap
+++ b/src/storybook/snapshots/Stories.test.ts.snap