Merge pull request #926 from mirumee/SALEOR-1017-shipping-rate-description

Shipping zone description

locale/defaultMessages.json

@@ -5388,6 +5388,9 @@
   "src_dot_shipping_dot_components_dot_ShippingMethodProducts_dot_4190792473": {
     "string": "Actions"
   },
+  "src_dot_shipping_dot_components_dot_ShippingRateInfo_dot_579967655": {
+    "string": "Shipping rate name"
+  },
   "src_dot_shipping_dot_components_dot_ShippingRateZipCodeRangeRemoveDialog_dot_1083561409": {
     "string": "Are you sure you want to remove this ZIP-code rule?"
   },
@@ -5438,33 +5441,47 @@
   "src_dot_shipping_dot_components_dot_ShippingZoneCountriesAssignDialog_dot_3510295703": {
     "string": "Search Countries"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_2364051773": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_countries": {
-    "string": "Currently, there are no countries assigned to this shipping zone"
+    "context": "country list header",
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_3109712047": {
     "string": "Countries"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_4049462680": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_createZone": {
-    "context": "header",
+    "context": "section header",
     "string": "Create New Shipping Zone"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_4270729636": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_defaultZone": {
     "string": "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_1325966144": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_noCountriesAssigned": {
-    "string": "Shipping"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_2364051773": {
     "string": "Currently, there are no countries assigned to this shipping zone"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_3109712047": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_countries": {
+    "context": "country list header",
     "string": "Countries"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_4270729636": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_defaultZone": {
     "string": "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_579967655": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_noCountriesAssigned": {
-    "string": "Shipping rate name"
+    "string": "Currently, there are no countries assigned to this shipping zone"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_shipping": {
+    "context": "shipping section header",
+    "string": "Shipping"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_1470703814": {
+    "context": "field placeholder",
+    "string": "Description of a shipping zone."
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_1560416099": {
+    "string": "Shipping zone name"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_3374163063": {
+    "string": "Description"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_3877274856": {
+    "context": "character limit",
+    "string": "{numberOfCharacters} of {maxCharacters} characters"
   },
   "src_dot_shipping_dot_components_dot_ShippingZoneRatesCreatePage_dot_1161979494": {
     "context": "page title",

schema.graphql

@@ -4782,6 +4782,7 @@ type ShippingZone implements Node & ObjectWithMetadata {
   countries: [CountryDisplay]
   shippingMethods: [ShippingMethod]
   warehouses: [Warehouse]
+  description: String
 }
 
 type ShippingZoneBulkDelete {
@@ -4809,6 +4810,7 @@ type ShippingZoneCreate {
 
 input ShippingZoneCreateInput {
   name: String
+  description: String
   countries: [String]
   default: Boolean
   addWarehouses: [ID]
@@ -4828,6 +4830,7 @@ type ShippingZoneUpdate {
 
 input ShippingZoneUpdateInput {
   name: String
+  description: String
   countries: [String]
   default: Boolean
   addWarehouses: [ID]

src/fragments/shipping.ts

@@ -13,6 +13,7 @@ export const shippingZoneFragment = gql`
       country
     }
     name
+    description
   }
 `;
 

src/fragments/types/ShippingZoneDetailsFragment.ts

@@ -117,6 +117,7 @@ export interface ShippingZoneDetailsFragment {
   id: string;
   countries: (ShippingZoneDetailsFragment_countries | null)[] | null;
   name: string;
+  description: string | null;
   default: boolean;
   shippingMethods: (ShippingZoneDetailsFragment_shippingMethods | null)[] | null;
   warehouses: (ShippingZoneDetailsFragment_warehouses | null)[] | null;

src/fragments/types/ShippingZoneFragment.ts

@@ -31,4 +31,5 @@ export interface ShippingZoneFragment {
   id: string;
   countries: (ShippingZoneFragment_countries | null)[] | null;
   name: string;
+  description: string | null;
 }

src/shipping/components/ShippingRateInfo/ShippingRateInfo.tsx

@@ -0,0 +1,52 @@
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import TextField from "@material-ui/core/TextField";
+import CardTitle from "@saleor/components/CardTitle";
+import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment";
+import { commonMessages } from "@saleor/intl";
+import { getFormErrors } from "@saleor/utils/errors";
+import getShippingErrorMessage from "@saleor/utils/errors/shipping";
+import React from "react";
+import { useIntl } from "react-intl";
+
+export interface ShippingRateInfoProps {
+  data: Record<"name", string>;
+  disabled: boolean;
+  errors: ShippingErrorFragment[];
+  onChange: (event: React.ChangeEvent<any>) => void;
+}
+
+const ShippingRateInfo: React.FC<ShippingRateInfoProps> = ({
+  data,
+  disabled,
+  errors,
+  onChange
+}) => {
+  const intl = useIntl();
+
+  const formErrors = getFormErrors(["name"], errors);
+
+  return (
+    <Card>
+      <CardTitle
+        title={intl.formatMessage(commonMessages.generalInformations)}
+      />
+      <CardContent>
+        <TextField
+          disabled={disabled}
+          error={!!formErrors.name}
+          fullWidth
+          helperText={getShippingErrorMessage(formErrors.name, intl)}
+          label={intl.formatMessage({
+            defaultMessage: "Shipping rate name"
+          })}
+          name="name"
+          value={data.name}
+          onChange={onChange}
+        />
+      </CardContent>
+    </Card>
+  );
+};
+ShippingRateInfo.displayName = "ShippingRateInfo";
+export default ShippingRateInfo;

src/shipping/components/ShippingRateInfo/index.ts

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

src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx

@@ -11,7 +11,7 @@ import { CountryFragment } from "@saleor/fragments/types/CountryFragment";
 import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment";
 import { sectionNames } from "@saleor/intl";
 import React from "react";
-import { useIntl } from "react-intl";
+import { defineMessages, useIntl } from "react-intl";
 
 import ShippingZoneCountriesAssignDialog from "../ShippingZoneCountriesAssignDialog";
 import ShippingZoneInfo from "../ShippingZoneInfo";
@@ -19,9 +19,29 @@ import ShippingZoneInfo from "../ShippingZoneInfo";
 export interface FormData {
   countries: string[];
   default: boolean;
+  description: string;
   name: string;
 }
 
+const messages = defineMessages({
+  countries: {
+    defaultMessage: "Countries",
+    description: "country list header"
+  },
+  createZone: {
+    defaultMessage: "Create New Shipping Zone",
+    description: "section header"
+  },
+  defaultZone: {
+    defaultMessage:
+      "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones"
+  },
+  noCountriesAssigned: {
+    defaultMessage:
+      "Currently, there are no countries assigned to this shipping zone"
+  }
+});
+
 export interface ShippingZoneCreatePageProps {
   countries: CountryFragment[];
   disabled: boolean;
@@ -46,6 +66,7 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
   const initialForm: FormData = {
     countries: [],
     default: false,
+    description: "",
     name: ""
   };
 
@@ -57,12 +78,7 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
             <AppHeader onBack={onBack}>
               {intl.formatMessage(sectionNames.shipping)}
             </AppHeader>
-            <PageHeader
+            <PageHeader title={intl.formatMessage(messages.createZone)} />
-              title={intl.formatMessage({
-                defaultMessage: "Create New Shipping Zone",
-                description: "header"
-              })}
-            />
             <Grid>
               <div>
                 <ShippingZoneInfo
@@ -79,14 +95,8 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
                   disabled={disabled}
                   emptyText={
                     data.default
-                      ? intl.formatMessage({
+                      ? intl.formatMessage(messages.defaultZone)
-                          defaultMessage:
+                      : intl.formatMessage(messages.noCountriesAssigned)
-                            "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones"
-                        })
-                      : intl.formatMessage({
-                          defaultMessage:
-                            "Currently, there are no countries assigned to this shipping zone"
-                        })
                   }
                   onCountryAssign={toggleModal}
                   onCountryUnassign={countryCode =>
@@ -99,9 +109,7 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
                       }
                     } as any)
                   }
-                  title={intl.formatMessage({
+                  title={intl.formatMessage(messages.countries)}
-                    defaultMessage: "Countries"
-                  })}
                 />
               </div>
             </Grid>

src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx

@@ -22,7 +22,7 @@ import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAu
 import { mapMetadataItemToInput } from "@saleor/utils/maps";
 import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 
 import { getStringOrPlaceholder } from "../../../misc";
 import { ChannelProps, FetchMoreProps, SearchProps } from "../../../types";
@@ -33,9 +33,29 @@ import ShippingZoneWarehouses from "../ShippingZoneWarehouses";
 
 export interface FormData extends MetadataFormData {
   name: string;
+  description: string;
   warehouses: string[];
 }
 
+const messages = defineMessages({
+  countries: {
+    defaultMessage: "Countries",
+    description: "country list header"
+  },
+  defaultZone: {
+    defaultMessage:
+      "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones"
+  },
+  noCountriesAssigned: {
+    defaultMessage:
+      "Currently, there are no countries assigned to this shipping zone"
+  },
+  shipping: {
+    defaultMessage: "Shipping",
+    description: "shipping section header"
+  }
+});
+
 export interface ShippingZoneDetailsPageProps
   extends FetchMoreProps,
     SearchProps,
@@ -93,6 +113,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
   const intl = useIntl();
 
   const initialForm: FormData = {
+    description: shippingZone?.description || "",
     metadata: shippingZone?.metadata.map(mapMetadataItemToInput),
     name: shippingZone?.name || "",
     privateMetadata: shippingZone?.privateMetadata.map(mapMetadataItemToInput),
@@ -128,7 +149,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
         return (
           <Container>
             <AppHeader onBack={onBack}>
-              <FormattedMessage defaultMessage="Shipping" />
+              <FormattedMessage {...messages.shipping} />
             </AppHeader>
             <PageHeader title={shippingZone?.name} />
             <Grid>
@@ -147,20 +168,12 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
                     shippingZone?.default === undefined
                       ? undefined
                       : shippingZone.default
-                      ? intl.formatMessage({
+                      ? intl.formatMessage(messages.defaultZone)
-                          defaultMessage:
+                      : intl.formatMessage(messages.noCountriesAssigned)
-                            "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones"
-                        })
-                      : intl.formatMessage({
-                          defaultMessage:
-                            "Currently, there are no countries assigned to this shipping zone"
-                        })
                   )}
                   onCountryAssign={onCountryAdd}
                   onCountryUnassign={onCountryRemove}
-                  title={intl.formatMessage({
+                  title={intl.formatMessage(messages.countries)}
-                    defaultMessage: "Countries"
-                  })}
                 />
                 <CardSpacer />
                 <ShippingZoneRates

src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx

@@ -1,21 +1,40 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
+import makeStyles from "@material-ui/core/styles/makeStyles";
 import TextField from "@material-ui/core/TextField";
+import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment";
 import { commonMessages } from "@saleor/intl";
 import { getFormErrors } from "@saleor/utils/errors";
 import getShippingErrorMessage from "@saleor/utils/errors/shipping";
 import React from "react";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 export interface ShippingZoneInfoProps {
-  data: Record<"name", string>;
+  data: Record<"name" | "description", string>;
   disabled: boolean;
   errors: ShippingErrorFragment[];
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
+const useStyles = makeStyles(
+  {
+    label: {
+      flex: 1
+    },
+    labelContainer: {
+      "& span": {
+        paddingRight: 30
+      },
+      display: "flex"
+    }
+  },
+  { name: "ShippingZoneCreatePage" }
+);
+
+const MAX_DESCRIPTION_LENGTH = 300;
+
 const ShippingZoneInfo: React.FC<ShippingZoneInfoProps> = ({
   data,
   disabled,
@@ -23,6 +42,7 @@ const ShippingZoneInfo: React.FC<ShippingZoneInfoProps> = ({
   onChange
 }) => {
   const intl = useIntl();
+  const classes = useStyles({});
 
   const formErrors = getFormErrors(["name"], errors);
 
@@ -38,12 +58,51 @@ const ShippingZoneInfo: React.FC<ShippingZoneInfoProps> = ({
           fullWidth
           helperText={getShippingErrorMessage(formErrors.name, intl)}
           label={intl.formatMessage({
-            defaultMessage: "Shipping rate name"
+            defaultMessage: "Shipping zone name"
           })}
           name="name"
           value={data.name}
           onChange={onChange}
         />
+        <CardSpacer />
+        <TextField
+          error={data.description.length > MAX_DESCRIPTION_LENGTH}
+          name={"description"}
+          label={
+            <div className={classes.labelContainer}>
+              <div className={classes.label}>
+                <FormattedMessage defaultMessage="Description" />
+              </div>
+              {data.description?.length > 0 && (
+                <span>
+                  <FormattedMessage
+                    defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
+                    description="character limit"
+                    values={{
+                      maxCharacters: MAX_DESCRIPTION_LENGTH,
+                      numberOfCharacters: data.description.length
+                    }}
+                  />
+                </span>
+              )}
+            </div>
+          }
+          InputProps={{
+            inputProps: {
+              maxLength: MAX_DESCRIPTION_LENGTH
+            }
+          }}
+          value={data.description}
+          onChange={onChange}
+          disabled={disabled}
+          fullWidth
+          multiline
+          placeholder={intl.formatMessage({
+            defaultMessage: "Description of a shipping zone.",
+            description: "field placeholder"
+          })}
+          rows={10}
+        />
       </CardContent>
     </Card>
   );

src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx

@@ -37,15 +37,15 @@ const useStyles = makeStyles(
       paddingRight: 24,
       width: ICONBUTTON_SIZE + theme.spacing(0.5)
     },
+    buttonColumn: {
+      padding: "4px 0",
+      width: "62px"
+    },
     nameColumn: {
       width: "auto"
     },
     valueColumn: {
       width: "auto"
-    },
-    buttonColumn: {
-      width: "62px",
-      padding: "4px 0"
     }
   }),
   { name: "ShippingZoneRates" }

src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx

@@ -15,7 +15,7 @@ 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 ShippingZoneInfo from "@saleor/shipping/components/ShippingZoneInfo";
+import ShippingRateInfo from "@saleor/shipping/components/ShippingRateInfo";
 import { createChannelsChangeHandler } from "@saleor/shipping/handlers";
 import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
 import React from "react";
@@ -116,7 +116,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
             />
             <Grid>
               <div>
-                <ShippingZoneInfo
+                <ShippingRateInfo
                   data={data}
                   disabled={disabled}
                   errors={errors}

src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx

@@ -17,7 +17,7 @@ import OrderValue from "@saleor/shipping/components/OrderValue";
 import OrderWeight from "@saleor/shipping/components/OrderWeight";
 import PricingCard from "@saleor/shipping/components/PricingCard";
 import ShippingMethodProducts from "@saleor/shipping/components/ShippingMethodProducts";
-import ShippingZoneInfo from "@saleor/shipping/components/ShippingZoneInfo";
+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";
@@ -124,7 +124,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
             <PageHeader title={rate?.name} />
             <Grid>
               <div>
-                <ShippingZoneInfo
+                <ShippingRateInfo
                   data={data}
                   disabled={disabled}
                   errors={errors}

src/shipping/fixtures.ts

@@ -264,6 +264,7 @@ export const shippingZones: ShippingZoneFragment[] = [
         country: "Wielka Brytania"
       }
     ],
+    description: "Shipping zone description",
     id: "U2hpcHBpbmdab25lOjE=",
     metadata: [],
     name: "Europe",
@@ -418,6 +419,7 @@ export const shippingZones: ShippingZoneFragment[] = [
         country: "Wallis i Futuna"
       }
     ],
+    description: "Shipping zone description",
     id: "U2hpcHBpbmdab25lOjI=",
     metadata: [],
     name: "Oceania",
@@ -425,7 +427,6 @@ export const shippingZones: ShippingZoneFragment[] = [
   },
   {
     __typename: "ShippingZone",
-
     countries: [
       {
         __typename: "CountryDisplay",
@@ -683,6 +684,7 @@ export const shippingZones: ShippingZoneFragment[] = [
         country: "Jemen"
       }
     ],
+    description: "Shipping zone description",
     id: "U2hpcHBpbmdab25lOjM=",
     metadata: [],
     name: "Asia",
@@ -690,7 +692,6 @@ export const shippingZones: ShippingZoneFragment[] = [
   },
   {
     __typename: "ShippingZone",
-
     countries: [
       {
         __typename: "CountryDisplay",
@@ -978,6 +979,7 @@ export const shippingZones: ShippingZoneFragment[] = [
         country: "Wyspy Dziewicze Stanów Zjednoczonych"
       }
     ],
+    description: "Shipping zone description",
     id: "U2hpcHBpbmdab25lOjQ=",
     metadata: [],
     name: "Americas",
@@ -985,7 +987,6 @@ export const shippingZones: ShippingZoneFragment[] = [
   },
   {
     __typename: "ShippingZone",
-
     countries: [
       {
         __typename: "CountryDisplay",
@@ -1289,6 +1290,7 @@ export const shippingZones: ShippingZoneFragment[] = [
         country: "Zimbabwe"
       }
     ],
+    description: "Shipping zone description",
     id: "U2hpcHBpbmdab25lOjU=",
     metadata: [],
     name: "Africa",
@@ -1556,6 +1558,7 @@ export const shippingZone: ShippingZone_shippingZone = {
     }
   ],
   default: false,
+  description: "Shipping zone description",
   id: "U2hpcHBpbmdab25lOjE=",
   metadata: [],
   name: "Europe",

src/shipping/types/CreateShippingRate.ts

@@ -123,6 +123,7 @@ export interface CreateShippingRate_shippingPriceCreate_shippingZone {
   id: string;
   countries: (CreateShippingRate_shippingPriceCreate_shippingZone_countries | null)[] | null;
   name: string;
+  description: string | null;
   default: boolean;
   shippingMethods: (CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods | null)[] | null;
   warehouses: (CreateShippingRate_shippingPriceCreate_shippingZone_warehouses | null)[] | null;

src/shipping/types/DeleteShippingRate.ts

@@ -123,6 +123,7 @@ export interface DeleteShippingRate_shippingPriceDelete_shippingZone {
   id: string;
   countries: (DeleteShippingRate_shippingPriceDelete_shippingZone_countries | null)[] | null;
   name: string;
+  description: string | null;
   default: boolean;
   shippingMethods: (DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods | null)[] | null;
   warehouses: (DeleteShippingRate_shippingPriceDelete_shippingZone_warehouses | null)[] | null;

src/shipping/types/ShippingZone.ts

@@ -149,6 +149,7 @@ export interface ShippingZone_shippingZone {
   id: string;
   countries: (ShippingZone_shippingZone_countries | null)[] | null;
   name: string;
+  description: string | null;
   default: boolean;
   shippingMethods: (ShippingZone_shippingZone_shippingMethods | null)[] | null;
   warehouses: (ShippingZone_shippingZone_warehouses | null)[] | null;

src/shipping/types/ShippingZones.ts

@@ -31,6 +31,7 @@ export interface ShippingZones_shippingZones_edges_node {
   id: string;
   countries: (ShippingZones_shippingZones_edges_node_countries | null)[] | null;
   name: string;
+  description: string | null;
 }
 
 export interface ShippingZones_shippingZones_edges {

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -144,6 +144,7 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
         id,
         input: {
           addWarehouses: warehouseDiff.added,
+          description: submitData.description,
           name: submitData.name,
           removeWarehouses: warehouseDiff.removed
         }

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

@@ -202858,7 +202858,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                   data-shrink="false"
                 >
-                  Shipping rate name
+                  Shipping zone name
                 </label>
                 <div
                   class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -202886,6 +202886,53 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="CardSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  <div
+                    class="ShippingZoneCreatePage-labelContainer-id"
+                  >
+                    <div
+                      class="ShippingZoneCreatePage-label-id"
+                    >
+                      Description
+                    </div>
+                  </div>
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                >
+                  <textarea
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    maxlength="300"
+                    name="description"
+                    placeholder="Description of a shipping zone."
+                    rows="10"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -203041,7 +203088,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                   data-shrink="false"
                 >
-                  Shipping rate name
+                  Shipping zone name
                 </label>
                 <div
                   class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -203074,6 +203121,53 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
                   Invalid value
                 </p>
               </div>
+              <div
+                class="CardSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  <div
+                    class="ShippingZoneCreatePage-labelContainer-id"
+                  >
+                    <div
+                      class="ShippingZoneCreatePage-label-id"
+                    >
+                      Description
+                    </div>
+                  </div>
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                >
+                  <textarea
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    maxlength="300"
+                    name="description"
+                    placeholder="Description of a shipping zone."
+                    rows="10"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -203229,7 +203323,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone loading 1`] = `
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                   data-shrink="false"
                 >
-                  Shipping rate name
+                  Shipping zone name
                 </label>
                 <div
                   class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -203258,6 +203352,54 @@ exports[`Storyshots Views / Shipping / Create shipping zone loading 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="CardSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
+                  data-shrink="false"
+                >
+                  <div
+                    class="ShippingZoneCreatePage-labelContainer-id"
+                  >
+                    <div
+                      class="ShippingZoneCreatePage-label-id"
+                    >
+                      Description
+                    </div>
+                  </div>
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                >
+                  <textarea
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    disabled=""
+                    maxlength="300"
+                    name="description"
+                    placeholder="Description of a shipping zone."
+                    rows="10"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -209575,7 +209717,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
-                  Shipping rate name
+                  Shipping zone name
                 </label>
                 <div
                   class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -209603,6 +209745,58 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="CardSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                  data-shrink="true"
+                >
+                  <div
+                    class="ShippingZoneCreatePage-labelContainer-id"
+                  >
+                    <div
+                      class="ShippingZoneCreatePage-label-id"
+                    >
+                      Description
+                    </div>
+                    <span>
+                      25 of 300 characters
+                    </span>
+                  </div>
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                >
+                  <textarea
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    maxlength="300"
+                    name="description"
+                    placeholder="Description of a shipping zone."
+                    rows="10"
+                  >
+                    Shipping zone description
+                  </textarea>
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -210487,7 +210681,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
-                  Shipping rate name
+                  Shipping zone name
                 </label>
                 <div
                   class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -210520,6 +210714,58 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                   Invalid value
                 </p>
               </div>
+              <div
+                class="CardSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                  data-shrink="true"
+                >
+                  <div
+                    class="ShippingZoneCreatePage-labelContainer-id"
+                  >
+                    <div
+                      class="ShippingZoneCreatePage-label-id"
+                    >
+                      Description
+                    </div>
+                    <span>
+                      25 of 300 characters
+                    </span>
+                  </div>
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                >
+                  <textarea
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    maxlength="300"
+                    name="description"
+                    placeholder="Description of a shipping zone."
+                    rows="10"
+                  >
+                    Shipping zone description
+                  </textarea>
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -211409,7 +211655,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                   data-shrink="false"
                 >
-                  Shipping rate name
+                  Shipping zone name
                 </label>
                 <div
                   class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -211438,6 +211684,54 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="CardSpacer-spacer-id"
+              />
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
+                  data-shrink="false"
+                >
+                  <div
+                    class="ShippingZoneCreatePage-labelContainer-id"
+                  >
+                    <div
+                      class="ShippingZoneCreatePage-label-id"
+                    >
+                      Description
+                    </div>
+                  </div>
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                >
+                  <textarea
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    disabled=""
+                    maxlength="300"
+                    name="description"
+                    placeholder="Description of a shipping zone."
+                    rows="10"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
             </div>
           </div>
           <div

src/types/globalTypes.ts

@@ -1710,6 +1710,7 @@ export interface ShippingZipCodeRulesCreateInputRange {
 
 export interface ShippingZoneCreateInput {
   name?: string | null;
+  description?: string | null;
   countries?: (string | null)[] | null;
   default?: boolean | null;
   addWarehouses?: (string | null)[] | null;
@@ -1717,6 +1718,7 @@ export interface ShippingZoneCreateInput {
 
 export interface ShippingZoneUpdateInput {
   name?: string | null;
+  description?: string | null;
   countries?: (string | null)[] | null;
   default?: boolean | null;
   addWarehouses?: (string | null)[] | null;