ShippingRateInfo component, separate ShippingZoneInfo, cleanups

locale/defaultMessages.json

@@ -5380,6 +5380,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?"
   },
@@ -5430,68 +5433,47 @@
   "src_dot_shipping_dot_components_dot_ShippingZoneCountriesAssignDialog_dot_3510295703": {
     "string": "Search Countries"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_3877274856": {
-    "context": "character limit",
-    "string": "{numberOfCharacters} of {maxCharacters} characters"
-  },
   "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_countries": {
-    "context": "countries",
+    "context": "country list header",
     "string": "Countries"
   },
   "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_defaultZone": {
-    "context": "default shipping zone",
     "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_ShippingZoneCreatePage_dot_description": {
-    "context": "description",
-    "string": "Description"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_descriptionMessage": {
-    "context": "field placeholder",
-    "string": "Description of a shipping zone."
-  },
   "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_noCountriesAssigned": {
-    "context": "no countries assigned to zone",
     "string": "Currently, there are no countries assigned to this shipping zone"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_shipping": {
-    "context": "shipping",
-    "string": "Shipping"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_3877274856": {
-    "context": "character limit",
-    "string": "{numberOfCharacters} of {maxCharacters} characters"
-  },
   "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_countries": {
-    "context": "countries",
+    "context": "country list header",
     "string": "Countries"
   },
   "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_defaultZone": {
-    "context": "default shipping zone",
     "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_description": {
-    "context": "description",
-    "string": "Description"
-  },
-  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_descriptionMessage": {
-    "context": "field placeholder",
-    "string": "Description of a shipping zone."
-  },
   "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_noCountriesAssigned": {
-    "context": "no countries assigned to zone",
     "string": "Currently, there are no countries assigned to this shipping zone"
   },
   "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_shipping": {
-    "context": "shipping",
+    "context": "shipping section header",
     "string": "Shipping"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_579967655": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_1470703814": {
-    "string": "Shipping rate name"
+    "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",

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

@@ -1,5 +1,3 @@
-import makeStyles from "@material-ui/core/styles/makeStyles";
-import TextField from "@material-ui/core/TextField";
 import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
@@ -13,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 { defineMessages, FormattedMessage, useIntl } from "react-intl";
+import { defineMessages, useIntl } from "react-intl";
 
 import ShippingZoneCountriesAssignDialog from "../ShippingZoneCountriesAssignDialog";
 import ShippingZoneInfo from "../ShippingZoneInfo";
@@ -25,53 +23,22 @@ export interface FormData {
   name: string;
 }
 
-const MAX_DESCRIPTION_LENGTH = 300;
-
-const useStyles = makeStyles(
-  {
-    label: {
-      flex: 1
-    },
-    labelContainer: {
-      "& span": {
-        paddingRight: 30
-      },
-      display: "flex"
-    }
-  },
-  { name: "ShippingZoneCreatePage" }
-);
-
 const messages = defineMessages({
   countries: {
     defaultMessage: "Countries",
-    description: "countries"
+    description: "country list header"
   },
   createZone: {
     defaultMessage: "Create New Shipping Zone",
-    description: "header"
+    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",
+      "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones"
-    description: "default shipping zone"
-  },
-  description: {
-    defaultMessage: "Description",
-    description: "description"
-  },
-  descriptionMessage: {
-    defaultMessage: "Description of a shipping zone.",
-    description: "field placeholder"
   },
   noCountriesAssigned: {
     defaultMessage:
-      "Currently, there are no countries assigned to this shipping zone",
+      "Currently, there are no countries assigned to this shipping zone"
-    description: "no countries assigned to zone"
-  },
-  shipping: {
-    defaultMessage: "Shipping",
-    description: "shipping"
   }
 });
 
@@ -93,7 +60,6 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
   saveButtonBarState
 }) => {
   const intl = useIntl();
-  const classes = useStyles({});
   const [isModalOpened, setModalStatus] = React.useState(false);
   const toggleModal = () => setModalStatus(!isModalOpened);
 
@@ -122,42 +88,6 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
                   onChange={change}
                 />
                 <CardSpacer />
-                <TextField
-                  error={data.description.length > MAX_DESCRIPTION_LENGTH}
-                  name={"description"}
-                  label={
-                    <div className={classes.labelContainer}>
-                      <div className={classes.label}>
-                        <FormattedMessage {...messages.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={change}
-                  disabled={disabled}
-                  fullWidth
-                  multiline
-                  placeholder={intl.formatMessage(messages.descriptionMessage)}
-                  rows={10}
-                />
-                <CardSpacer />
                 <CountryList
                   countries={data.countries.map(selectedCountry =>
                     countries.find(country => country.code === selectedCountry)

src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx

@@ -1,5 +1,3 @@
-import makeStyles from "@material-ui/core/styles/makeStyles";
-import TextField from "@material-ui/core/TextField";
 import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
@@ -39,49 +37,22 @@ export interface FormData extends MetadataFormData {
   warehouses: string[];
 }
 
-const MAX_DESCRIPTION_LENGTH = 300;
-
-const useStyles = makeStyles(
-  {
-    label: {
-      flex: 1
-    },
-    labelContainer: {
-      "& span": {
-        paddingRight: 30
-      },
-      display: "flex"
-    }
-  },
-  { name: "ShippingZoneDetailsPage" }
-);
-
 const messages = defineMessages({
   countries: {
     defaultMessage: "Countries",
-    description: "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",
+      "This is default shipping zone, which means that it covers all of the countries which are not assigned to other shipping zones"
-    description: "default shipping zone"
-  },
-  description: {
-    defaultMessage: "Description",
-    description: "description"
-  },
-  descriptionMessage: {
-    defaultMessage: "Description of a shipping zone.",
-    description: "field placeholder"
   },
   noCountriesAssigned: {
     defaultMessage:
-      "Currently, there are no countries assigned to this shipping zone",
+      "Currently, there are no countries assigned to this shipping zone"
-    description: "no countries assigned to zone"
   },
   shipping: {
     defaultMessage: "Shipping",
-    description: "shipping"
+    description: "shipping section header"
   }
 });
 
@@ -140,7 +111,6 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
   warehouses
 }) => {
   const intl = useIntl();
-  const classes = useStyles({});
 
   const initialForm: FormData = {
     description: shippingZone?.description || "",
@@ -175,7 +145,6 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
         );
 
         const changeMetadata = makeMetadataChangeHandler(change);
-        const description = data.description;
 
         return (
           <Container>
@@ -246,41 +215,6 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
                   warehouses={warehouseChoices}
                 />
               </div>
-              <TextField
-                error={description.length > MAX_DESCRIPTION_LENGTH}
-                name={"description"}
-                label={
-                  <div className={classes.labelContainer}>
-                    <div className={classes.label}>
-                      <FormattedMessage {...messages.description} />
-                    </div>
-                    {description?.length > 0 && (
-                      <span>
-                        <FormattedMessage
-                          defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
-                          description="character limit"
-                          values={{
-                            maxCharacters: MAX_DESCRIPTION_LENGTH,
-                            numberOfCharacters: description.length
-                          }}
-                        />
-                      </span>
-                    )}
-                  </div>
-                }
-                InputProps={{
-                  inputProps: {
-                    maxLength: MAX_DESCRIPTION_LENGTH
-                  }
-                }}
-                value={description}
-                onChange={change}
-                disabled={loading || disabled}
-                fullWidth
-                multiline
-                placeholder={intl.formatMessage(messages.descriptionMessage)}
-                rows={10}
-              />
             </Grid>
             <SaveButtonBar
               disabled={disabled || !hasChanged}

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/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/storybook/__snapshots__/Stories.test.ts.snap

@@ -201865,7 +201865,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"
@@ -201893,8 +201893,6 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
                   </fieldset>
                 </div>
               </div>
-            </div>
-          </div>
               <div
                 class="CardSpacer-spacer-id"
               />
@@ -201942,6 +201940,8 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
                   </fieldset>
                 </div>
               </div>
+            </div>
+          </div>
           <div
             class="CardSpacer-spacer-id"
           />
@@ -202095,7 +202095,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"
@@ -202128,8 +202128,6 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
                   Invalid value
                 </p>
               </div>
-            </div>
-          </div>
               <div
                 class="CardSpacer-spacer-id"
               />
@@ -202177,6 +202175,8 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
                   </fieldset>
                 </div>
               </div>
+            </div>
+          </div>
           <div
             class="CardSpacer-spacer-id"
           />
@@ -202330,7 +202330,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"
@@ -202359,8 +202359,6 @@ exports[`Storyshots Views / Shipping / Create shipping zone loading 1`] = `
                   </fieldset>
                 </div>
               </div>
-            </div>
-          </div>
               <div
                 class="CardSpacer-spacer-id"
               />
@@ -202409,6 +202407,8 @@ exports[`Storyshots Views / Shipping / Create shipping zone loading 1`] = `
                   </fieldset>
                 </div>
               </div>
+            </div>
+          </div>
           <div
             class="CardSpacer-spacer-id"
           />
@@ -208724,7 +208724,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"
@@ -208752,6 +208752,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
@@ -209571,55 +209623,6 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
             </div>
           </div>
         </div>
-        <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="ShippingZoneDetailsPage-labelContainer-id"
-            >
-              <div
-                class="ShippingZoneDetailsPage-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>
   </form>
@@ -209685,7 +209688,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"
@@ -209718,6 +209721,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
@@ -210537,55 +210592,6 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
             </div>
           </div>
         </div>
-        <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="ShippingZoneDetailsPage-labelContainer-id"
-            >
-              <div
-                class="ShippingZoneDetailsPage-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>
   </form>
@@ -210656,7 +210662,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"
@@ -210685,6 +210691,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
@@ -211280,51 +211334,6 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
             </div>
           </div>
         </div>
-        <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="ShippingZoneDetailsPage-labelContainer-id"
-            >
-              <div
-                class="ShippingZoneDetailsPage-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>
   </form>