Add description to shipping zone create, refactor defaultMessages

locale/defaultMessages.json

@@ -5430,41 +5430,66 @@
   "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_3877274856": {
-    "string": "Currently, there are no countries assigned to this shipping zone"
+    "context": "character limit",
+    "string": "{numberOfCharacters} of {maxCharacters} characters"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_3109712047": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_countries": {
+    "context": "countries",
     "string": "Countries"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_4049462680": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_createZone": {
     "context": "header",
     "string": "Create New Shipping Zone"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_4270729636": {
+  "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_ShippingZoneDetailsPage_dot_1325966144": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_description": {
-    "string": "Shipping"
+    "context": "description",
+    "string": "Description"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_1470703814": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_descriptionMessage": {
+    "context": "field placeholder",
     "string": "Description of a shipping zone."
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_2364051773": {
+  "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_ShippingZoneDetailsPage_dot_3109712047": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneCreatePage_dot_shipping": {
-    "string": "Countries"
+    "context": "shipping",
-  },
+    "string": "Shipping"
-  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_3374163063": {
-    "string": "Description"
   },
   "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_4270729636": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneDetailsPage_dot_countries": {
+    "context": "countries",
+    "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",
+    "string": "Shipping"
+  },
   "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_579967655": {
     "string": "Shipping rate name"
   },

schema.graphql

@@ -4810,6 +4810,7 @@ type ShippingZoneCreate {
 
 input ShippingZoneCreateInput {
   name: String
+  description: String
   countries: [String]
   default: Boolean
   addWarehouses: [ID]
@@ -4829,9 +4830,9 @@ type ShippingZoneUpdate {
 
 input ShippingZoneUpdateInput {
   name: String
+  description: String
   countries: [String]
   default: Boolean
-  description: String
   addWarehouses: [ID]
   removeWarehouses: [ID]
 }

src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx

@@ -1,3 +1,5 @@
+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";
@@ -11,7 +13,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, FormattedMessage, useIntl } from "react-intl";
 
 import ShippingZoneCountriesAssignDialog from "../ShippingZoneCountriesAssignDialog";
 import ShippingZoneInfo from "../ShippingZoneInfo";
@@ -19,9 +21,60 @@ import ShippingZoneInfo from "../ShippingZoneInfo";
 export interface FormData {
   countries: string[];
   default: boolean;
+  description: string;
   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"
+  },
+  createZone: {
+    defaultMessage: "Create New Shipping Zone",
+    description: "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",
+    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",
+    description: "no countries assigned to zone"
+  },
+  shipping: {
+    defaultMessage: "Shipping",
+    description: "shipping"
+  }
+});
+
 export interface ShippingZoneCreatePageProps {
   countries: CountryFragment[];
   disabled: boolean;
@@ -40,12 +93,14 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
   saveButtonBarState
 }) => {
   const intl = useIntl();
+  const classes = useStyles({});
   const [isModalOpened, setModalStatus] = React.useState(false);
   const toggleModal = () => setModalStatus(!isModalOpened);
 
   const initialForm: FormData = {
     countries: [],
     default: false,
+    description: "",
     name: ""
   };
 
@@ -57,12 +112,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
@@ -72,6 +122,42 @@ 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)
@@ -79,14 +165,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 +179,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

@@ -24,7 +24,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";
@@ -39,7 +39,7 @@ export interface FormData extends MetadataFormData {
   warehouses: string[];
 }
 
-const maxDescriptionLength = 300;
+const MAX_DESCRIPTION_LENGTH = 300;
 
 const useStyles = makeStyles(
   {
@@ -56,6 +56,35 @@ const useStyles = makeStyles(
   { name: "ShippingZoneDetailsPage" }
 );
 
+const messages = defineMessages({
+  countries: {
+    defaultMessage: "Countries",
+    description: "countries"
+  },
+  defaultZone: {
+    defaultMessage:
+      "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",
+    description: "no countries assigned to zone"
+  },
+  shipping: {
+    defaultMessage: "Shipping",
+    description: "shipping"
+  }
+});
+
 export interface ShippingZoneDetailsPageProps
   extends FetchMoreProps,
     SearchProps,
@@ -151,7 +180,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
         return (
           <Container>
             <AppHeader onBack={onBack}>
-              <FormattedMessage defaultMessage="Shipping" />
+              <FormattedMessage {...messages.shipping} />
             </AppHeader>
             <PageHeader title={shippingZone?.name} />
             <Grid>
@@ -170,20 +199,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
@@ -226,12 +247,12 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
                 />
               </div>
               <TextField
-                error={description.length > maxDescriptionLength}
+                error={description.length > MAX_DESCRIPTION_LENGTH}
                 name={"description"}
                 label={
                   <div className={classes.labelContainer}>
                     <div className={classes.label}>
-                      <FormattedMessage defaultMessage="Description" />
+                      <FormattedMessage {...messages.description} />
                     </div>
                     {description?.length > 0 && (
                       <span>
@@ -239,7 +260,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
                           defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
                           description="character limit"
                           values={{
-                            maxCharacters: maxDescriptionLength,
+                            maxCharacters: MAX_DESCRIPTION_LENGTH,
                             numberOfCharacters: description.length
                           }}
                         />
@@ -249,7 +270,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
                 }
                 InputProps={{
                   inputProps: {
-                    maxLength: maxDescriptionLength
+                    maxLength: MAX_DESCRIPTION_LENGTH
                   }
                 }}
                 value={description}
@@ -257,9 +278,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
                 disabled={loading || disabled}
                 fullWidth
                 multiline
-                placeholder={intl.formatMessage({
+                placeholder={intl.formatMessage(messages.descriptionMessage)}
-                  defaultMessage: "Description of a shipping zone."
-                })}
                 rows={10}
               />
             </Grid>

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

@@ -201898,6 +201898,53 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
           <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
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
@@ -202086,6 +202133,53 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
           <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
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >
@@ -202270,6 +202364,54 @@ exports[`Storyshots Views / Shipping / Create shipping zone loading 1`] = `
           <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
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
           >

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,9 +1718,9 @@ export interface ShippingZoneCreateInput {
 
 export interface ShippingZoneUpdateInput {
   name?: string | null;
+  description?: string | null;
   countries?: (string | null)[] | null;
   default?: boolean | null;
-  description?: string | null;
   addWarehouses?: (string | null)[] | null;
   removeWarehouses?: (string | null)[] | null;
 }